Предыстория

В 2014 году в компании начали редизайн проекта и в основу вёрстки мы положили свежий на тот момент Bootstrap 3.0.1. Использовали мы его не как отдельную стороннюю библиотеку, а тесно заинтегрировали с нашим собственным кодом: отредактировали переменные под наш дизайн и компилировали кастомизированный Бутстрап из Less исходников самостоятельно. Проект оброс собственными модулями, которые использовали бутстраповские переменные и добавляли в файл с настройками свои новые переменные.

В тот момент я думал, что это правильный подход. Ведь код сразу компилируется с нужными значениями без переопределения стилей. CSS чистый, компактный и без повторений. Компоненты стилизованы с помощью глобальных настроек.

Через год с небольшим редизайн закончился, проект вышел в продакшн, и мы взялись за технический долг. При попытке обновить Бутстрап до версии 3.6.x выяснилось, что смержить новый variables.less с нашим файлом настроек будет нелегко. В Бутстрапе переименовали или убрали часть переменных, добавили новые. Собственные компоненты Бутстрапа обновились без проблем, а вот наши компоненты падали при компиляции из-за этих изменений.

Проблемы

Мы проанализировали ситуацию и сформулировали проблемы.

1. Слишком связанный код.

   Сами компоненты лежали в отдельных файлах. Это создавало иллюзию, что компоненты независимые. Но компоненты использовали переменные, объявленные в отдельном файле variables.less, и без этого файла не работали. Нельзя было просто так взять и переместить компонент в другой проект. Приходилось тянуть за собой файл с настройками, который со временем превратился в помойку.

2. Слишком много глобальных переменных.

   У Бутстрапа было ≈400 переменных. Мы отключили неиспользуемые компоненты Бутстрапа, но переменные оставили в конфиге на случай, если снова понадобятся. Еще мы добавили сотню или полторы своих переменных. Все названия не запомнить, трудно быстро находить нужные. Даже с правилами именования и комментариями ориентироваться в конфиге из 500+ переменных тяжело.

3. Имена глобальных переменных вышли из-под контроля.

   Одна и та же переменная могла использоваться в разных файлах и отслеживать все её появления в коде было долго и трудно. Когда меняли значение переменной в одном компоненте, был риск поломать другие компоненты. Разработчики хардкодили, создавали новые переменные с похожими названиями и значениями и уже не следили за логикой именования.

Как решать

Я придумал три правила, которые помогли побороть наши проблемы:

1. Переменная используется только в том файле, в котором объявлена.

   Правильно создавать все нужные переменные в файле самого компонента и не использовать переменные из других файлов. Тогда компоненты станут независимыми, их можно будет подключать и перемещать между проектами без поломок при компиляции. У каждого компонента собственный набор переменных, которые запрещено использовать в других компонентах и вызывать в других файлах. Когда переменные не выходят за пределы одного файла, легко увидеть, как они используются и на что влияют.

2. Все переменные внутри компонента — локальные.

   Раз у каждого компонента свои переменные, пусть они будут локальными. Это избавит от проблем с именованием: в компонентах можно использовать переменные с одинаковыми именами и разными значениями — они не будут конфликтовать друг с другом.

3. Глобальные переменные используются только внутри файла настроек.

   Благодаря первым двум правилам мы сильно сократим количество глобальных переменных, но они всё равно нужны. Глобальные переменные объявляются в главном файле проекта или в файле типа config.less. К ним тоже применяется правило №1 — переменные не используются за пределами своего файла. Это значит, что нельзя использовать глобальные переменные внутри файлов компонентов. Но существует способ не нарушая первого правила прокинуть значение глобальной переменной внутрь компонента. Как это сделать мы рассмотрим на примерах далее.

Третье правило избыточное. Соблюдая первые два, вы автоматически соблюдаете третье. Но в реальной жизни есть очень большой соблазн пойти по простейшему пути, не создавать локальную переменную, а по-быстрому использовать глобальную. Третье правило напоминает, что так делать вредно, что это создаёт ненужные зависимости и приводит к связыванию кода.

Применим правила на практике.

Реализация на Less

Представим простейший компонент для стилизации страницы. Согласно правилу №1 создадим переменные внутри файла компонента.

/* page.css */

.page {
    padding: 40px;
    color: #000;
    background-color: #fff;
}

// page.less v0.1

@padding: 40px;
@txt-color: #000;
@bg-color: #fff;

.page {
    padding: @padding;
    color: @txt-color;
    background-color: @bg-color;
}

В примере выше мы объявили переменные в глобальной области видимости и из-за этого они подвержены конфликту имён. Если в соседнем компоненте появится переменная с таким же именем, то компоненты поломают друг друга.

Локальные переменные

Область видимости — это «пространство» между фигурными скобками селектора: { и } . Объявленные внутри фигурных скобок переменные работают только внутри этих скобок и внутри дочерних скобок, но их нельзя использовать снаружи.

Если скобок вокруг нет, то это самый верхний уровень — глобальная область видимости.

У переменной из дочерней области видимости приоритет выше, чем у одноименной переменной из родительской области видимости. У глобальных переменных самый низкий приоритет при совпадении имён.

По правилу №2 сделаем переменные локальными — переместим их внутрь селектора.

// page.less v0.1

@padding: 40px;
@txt-color: #000;
@bg-color: #fff;

.page {
    padding: @padding;
    color: @txt-color;
    background-color: @bg-color;
}

// page.less v0.2

.page {
    @padding: 40px;
    @txt-color: #000;
    @bg-color: #fff;

    padding: @padding;
    color: @txt-color;
    background-color: @bg-color;
}

Теперь конфликта имен с другими компонентами не будет. Мы решили первую и вторую проблемы: получился изолированный сниппет без внешних зависимостей. Но я не знаю способа переопределить локальные переменные компонента в таком виде извне. Поэтому, чтобы кастомизировать компоненты глобальными переменными проекта, придумал другую форму записи.

Миксины как функции

В Less можно использовать миксины как функции. Если внутри миксина создать переменные, а потом вызвать миксин внутри селектора, то переменные будут доступны в области видимости этого селектора.

Вынесем объявление переменных внутрь миксина .page-settings(), а потом вызовем его внутри селектора .page:

// page.less v0.2

.page {
    @padding: 40px;
    @txt-color: #000;
    @bg-color: #fff;

    padding: @padding;
    color: @txt-color;
    background-color: @bg-color;
}

// page.less v0.3

.page-settings() {
    @padding: 40px;
    @txt-color: #000;
    @bg-color: #fff;
}

.page {
    .page-settings();

    padding: @padding;
    color: @txt-color;
    background-color: @bg-color;
}

Переменные локализованы внутри глобального миксина. Когда мы вызвали миксин в коде, переменные стали доступны в области видимости селектора .page, но по прежнему остались локальными.

Такой миксин не генерирует CSS код, его единственная задача — доставить переменные в нужную область видимости. Например, если вызвать этот миксин в глобальной области видимости, то и переменные станут глобальными. Но это то же самое, что сразу объявить переменные глобально.

Вместо нескольких глобальных переменных с распространёнными именами мы создали один глобальный миксин. В проекте не должно быть двух одноименных компонентов, значит имя миксина будет уникальным.

Слияние миксинов

В Less существует «ленивое вычисление» переменных: не обязательно объявлять Less-переменную перед её использованием, можно объявить после. В момент компиляции парсер Less найдет определение переменной и отрендерит значение этой переменной в CSS.

Если переопределить переменную, то во всех местах её использования в силу вступит значение из самого последнего определения, так как оно приоритетнее по порядку следования в исходном коде. В этом смысле переменные ведут себя как константы.

Итак, переменные можно объявлять и до, и после использования, а миксины — это разновидность переменных. Если создать два миксина с одним и тем же именем и разным содержанием, то они объединяют свои внутренности. А если внутри миксинов есть переменные с одинаковыми именами, то происходит переопределение. Приоритет выше у последнего миксина.

Рассмотрим три файла:

// projectname.less

@import 'normalize.css';
@import 'typography.less';
@import 'page.less';
// и много других компонентов...

@import 'config.less';

// page.less v0.3

.page-settings() {
    @padding: 40px;
    @txt-color: #000;
    @bg-color: #fff;
}

.page {
    .page-settings();

    padding: @padding;
    color: @txt-color;
    background-color: @bg-color;
}

// config.less

@glob-text-color: white;
@glob-bg-color: darkblue;

// кастомизация компонентов
.page-settings() {
    @txt-color: @glob-text-color;
    @bg-color: @glob-bg-color;
}

Всё самое интересное происходит в конфиге. Мы создали глобальные переменные и использовали их в этом же файле для кастомизации компонента.

Миксин .page-settings() объявлен два раза. Первый раз внутри файла page.less с дефолтными значениями, второй раз в файле config.less с новыми значениями. На этапе компиляции миксины склеиваются, новые переменные переопределяют дефолтные и CSS рендерится с новыми значениями из файла конфигурации.

Обратите внимание, что config.less инклюдится последним в списке. Это нужно, чтобы объявление миксина в конфиге имело больший приоритет, чем исходное объявление в файле самого компонента. Настройки не применятся, если поставить config.less до компонента, потому что на миксины тоже действуют правило «последнее определение — самое сильное».

Таким способом мы прокинули значения глобальных переменных внутрь файла компонента, не меняя исходный код компонента. При этом были соблюдены все три правила:

1. переменные использовались только в своём файле, даже глобальные переменные не вызывались за пределами файла config.less;
2. переменные компонента остались локальными и не засорили глобальную область видимости;
3. глобальные переменные не использовались внутри компонента напрямую, но значения глобальных переменных хитрым способом попали внутрь компонента.

Ограничения

Нельзя, чтобы имя глобальной переменной совпадало с именем локальной — получим рекурсию и CSS не скомпилируется. Чтобы не ошибиться, лучше все глобальные переменные записывать с префиксом.

// так нельзя

@txt-color: white;

.page-settings() {
    // тут рекурсия и ошибка компиляции
    @txt-color: @txt-color;
}

// правильно — с префиксом

@glob-txt-color: white;

.page-settings() {
    // всё в порядке
    @txt-color: @glob-txt-color;
}

Реализация в Sass

Sass отличается от Less и больше похож на скриптовый язык программирования: нет «ленивых вычислений» и переменная должна быть обязательно объявлена до её использования в коде. Если определить переменную и использовать её в коде, а потом переопределить и использовать ещё раз, то в первый вызов получим исходное значение в CSS, а во второй вызов новое значение. Трюк с миксинами, как в Less, не пройдет. Но есть другие пути решения.

Наборы переменных для настройки компонента удобно хранить в map-объектах. Это массив из пар «ключ: значение». Метод map-get извлекает конкретное значение из массива, метод map-merge объединяет два массива в один, дополняя или переписывая исходный массив.

Простейший компонент без возможности переопределения извне будет выглядеть так:

// page.scss v0.1

$page-settings: (
    padding: 40px,
    bg-color: #fff,
    text-color: #000,
);

.page {
    padding:          map-get($page-settings, padding);
    background-color: map-get($page-settings, bg-color);
    color:            map-get($page-settings, text-color);
}

Чтобы настраивать компонент из другого файла, нужно предусмотреть возможность смержить внешний конфиг с исходными настройками. Рассмотрим три файла:

// projectname.scss

@import: 'config';

@import: 'normalize';
@import: 'typography';
@import: 'page';
// и много других компонентов...

// config.scss

$glob-text-color: white;
$glob-bg-color: darkblue;

// кастомизируем
$page-settings: (
    bg-color: $glob-bg-color,
    text-color: $glob-text-color,
);

// page.scss v0.2

$page-override: ( ); // [1]

@if variable-exists(page-settings) {
    $page-override: $page-settings; // [2]
}

$page-settings:  map-merge((
    padding: 40px,
    bg-color: #fff,
    text-color: #000,
), $page-override); // [3]

.page {
    padding:          map-get($page-settings, padding);
    background-color: map-get($page-settings, bg-color);
    color:            map-get($page-settings, text-color);
}

[1] — В компоненте мы сначала объявили переменную с пустым массивом $page-override.

[2] — Потом проверили, а не существует ли уже переменная $page-settings. И если она уже была объявлена в конфиге, то присвоили её значение переменной $page-override.

[3] — И потом смержили исходный конфиг и $page-override в переменную $page-settings.

Если массив $page-settings был объявлен ранее в глобальном конфиге, то $page-override перепишет настройки при слиянии. Иначе в переменной $page-override будет пустой массив, и в настройках останутся исходные значения.

В результате, мы получаем всё те же преимущества, только в отличие от Less нам приходится переопределять все настройки заранее, перед их использованием в коде.

Выводы

Не важно на чем вы пишете — на Less, Sass, CSS c кастомными свойствами или Javascript — глобальных переменных должно быть как можно меньше.

С CSS препроцессорами используйте три правила, которые помогут избежать хаоса:

1. Переменная используется только в том файле, в котором объявлена.
2. Все переменные внутри компонента — локальные.
3. Глобальные переменные используются только внутри файла настроек.

Чтобы прокинуть глобальные настройки внутрь компонента, собирайте переменные в миксин (Less) или map-объект (Sass).

Переопределяйте настройки в правильном месте: в Less — после инклюда, в Sass — перед инклюдом.

Реальные примеры

Я сформулировал эту методику в декабре 2015 года для Less и с тех пор применяю её на рабочих и личных проектах.

За полтора года появилось несколько публичных npm-пакетов. Посмотрите исходный код для лучшего понимания, как работает эта методика в реальных ситуациях.

bettertext.css — типографика для сайтов. Настраивается при помощи 11 переменных, остальные 40 вычисляются по формулам. Вычисления идут отдельными миксином, чтобы была возможность переопределять формулы. У компонента нет ни одного класса, все стили применяются к тегам. Чтобы создать локальную область видимости, я поместил все селекторы по тегам в переменную — в Less это называется «detached ruleset».

links.less — стили для ссылок с фокусом, анимацией и бледным подчеркиванием. У компонента кроме миксина с настройками есть дополнительные глобальные миксины для раскрашивания ссылок внутри ваших собственных селекторов.

flxgrid.css — генератор HTML-сеток на флексах. Настраивается при помощи 5 переменных, генерирует классы для адаптивной сетки с любыми брейкпоинтами и любым количеством колонок. В компоненте вычисления и служебные миксины спрятаны внутрь локальной области видимости. Глобально виден только миксин с настройками.

space.less — инструмент для управления отступами в вёрстке. Создан, чтобы работать в паре с сеткой flxgrid.css. Адаптивность у них настраивается одинаково, но space.less использует собственный миксин настройки и собственные локальные переменные — в коде space.less никак не связан с flxgrid.css.

«Бонус-трек»

Если бы мне сейчас понадобилось использовать на новом проекте Bootstrap 3.x.x — тот, который на Less, — я бы все импортируемые модули Бутстрапа завернул в переменную (в «detached ruleset»), а все настройки из файла variables.less в миксин bootsrtap-settings. Глобальные переменные Бутстрапа перестали бы быть глобальными и их невозможно было бы использовать внутри собственного кода. Настройки Бутстрапа я бы кастомизировал по мере необходимости, вызывая миксин bootsrtap-settings в конфиге проекта, так же как в примерах выше. Тогда при обновлениях Бутстрапа пришлось бы поправить только миксин с кастомизированными настройкам.

Упростите жизнь ревьюверам. Постарайтесь, чтобы оценка кода занимала у них как можно меньше времени, а отправлять комментарии и исправления было легко. Чем меньше усилий потребуется со стороны ревьювера, тем выше шанс получить код ревью.

Код — на Гитхабе

Отправлять почтой zip-архив и просить посмотреть — неудобно для ревьювера. Некоторые откажутся сразу. Кто-то согласится, но не сделает. У оставшихся возникнет проблема, в каком виде отправить вам комментарии и замечания назад.

Для маленьких и простых вещей делайте демку на http://codepen.io и похожих сервисах. Открыть ссылку, посмотреть код и результат, форкнуть, исправить или оставить пару комментариев там не займет много времени. И даже не придется открывать текстовый редактор или IDE.

Сайты, одностраничники, свёрстанные макеты заливайте на GitHub Pages. Для этого вам придется разобраться с git, но git вам точно понадобится. Код на GitHub удобно просматривать и оставлять комментарии к конкретным строкам, ссылаться на другие файлы и строки внутри них. Ревьювер может исправить ваш код, отправить исправления через pull request и прокомментировать, почему он так сделал. А вы увидите на одном экране старую версию кода, исправленную и комментарии к исправлениям.

К тому же, не покупая домен и хостинг, вы соберете себе портфолио на GitHub.

Только готовые работы

Выставляйте на ревью готовые работы: когда вы сами уже исправили всё, что заметили, и улучшили всё, что могли. Иначе ревьювер найдёт несколько самых очевидных косяков и перестанет искать дальше. Решит, что «для начала достаточно», или выдаст резюме, что «тут совсем всё плохо» и «надо полностью переверстать». Вы потратите время другого человека и не получите пользы.

Если вас интересует мнение по поводу части какой-либо незаконченной работы, просите посмотреть конкретный файл с указанием номеров строк. А лучше сделайте изолированный пример на codepen.io, чтобы «сырой» код не отвлекал ревьювера. Чем меньше кода покажешь ревьюверу, тем внимательнее он его посмотрит.

На ревью — по одному

Если у вас готово несколько работ, то на ревью их выставляйте по одной. Не просите посмотреть всё сразу. Вероятно, вы совершаете систематические ошибки, которые присутствуют во всех работах. Когда вам указали на ошибки в первой работе, исправляйте эти ошибки в остальных и только потом показывайте следующую работу ревьюверам. Так вы научитесь большему, написав меньше кода и задолбав меньше ревьюверов.

А ещё уговорить кого-то посмотреть маленький кусочек кода проще, чем просить оценить сразу все ваши проекты.

Сопроводительная информация

Ревьювер захочет узнать, как выглядит исходник дизайна, который вы сверстали, какие требования к вёрстке поставлены в техническом задании, поддержка браузеров и размеров экранов. Но ревьювер не захочет качать 100Мб исходников и рыться в длинном документе в поисках технических требований.

Кратко опишите требования, что и зачем вы делали, оставьте ссылку на скриншот дизайна.

Задавайте конкретные вопросы

Помогите ревьюверу помочь вам. Укажите, в каких местах у вас возникли проблемы. Спрашивайте, если сомневаетесь в своих решениях. Отвечать на конкретные вопросы проще, чем на общие типа «всё ли в порядке с моей вёрсткой». Поверните обсуждение в нужное вам русло.

Запаситесь скриншотами

Ревьювер посмотрит вёрстку в своём любимом браузере и вряд ли посмотрит в другом. Если у вас проблемы в каком-либо конкретном браузере, прикрепите скриншот проблемы или сделайте гифку. Лучше один раз увидеть, чем пять раз перечитать описание.

Где искать ревьюверов

Когда вам будет что показать, отправляйте ссылки на код знакомым и незнакомым профессионалам, оставляйте сообщения в профильных сообществах и на форумах. Например, на http://htmlforum.ru или https://toster.ru.

Итоги

Следование этим рекомендациям избавит ревьювера от лишней работы, упростит и ускорит процесс оценки кода. А вы получите конструктивные советы и замечания.

Покажите человеку, что вы цените его время, и тогда он захочет помочь вам.

Отличия в лицензиях

Настольная лицензия (desktop license): Вы один раз покупаете ttf-файлы шрифта, устанавливаете их себе на компьютер и можете неограниченно использовать в графических редакторах или на печати.

Если вы сконвертируете купленный шрифт для использования в вебе, то это будет нарушением настольной лицензии, т.к. файлы шрифта не остаются только на вашем компьютере, а загружаются на компьютер посетителя вашего сайта. Поэтому популярные конвертеры, типа fontsquirrel, блокируют преобразование платных шрифтов.

Веб-лицензия (webfont license): Вы не покупаете шрифт, вы берете его в аренду. При аренде вам дают ссылку на подключение шрифта к вашей странице (как в Google Fonts) и вы оплачиваете количество обращений по этой ссылке. Существует несколько моделей оплаты:

• Можно оплатить заранее определённое количество просмотров (pageviews) без ограничений по времени. При такой оплате нужно приобретать каждое начертание шрифта отдельно: например, Normal, Italic, Bold, Bold Italic. Каждая загрузка страницы будет крутить счётчик числа обращений к шрифту. Когда количество оплаченных просмотров будет заканчиваться, вам придет сообщение с просьбой докупить ещё. Если вы не продлили аренду, то шрифт перестанет загружаться — позаботьтесь об адекватной замене системным шрифтом! Но можно настроить автопродление подписки, деньги будут списываться автоматически а посетители вашего сайта всегда будут видеть правильные шрифты.

  Для сайта с небольшой посещаемостью такой способ подписки вполне приемлем, предоплаченного количества посещений хватит надолго. Но если у вас нагруженный ресурс, то деньги будут улетать с большой скоростью.

• Можно оплатить ежемесячную подписку на шрифт. Стоимость подписки будет зависеть от максимального количества просмотров вашего сайта в месяц. Например, вы берёте подписку на план c ограничением, например, в 1 500 000 просмотров в месяц. Если в какой-то месяц количество посещений вашего сайта превысит ограничение, вам будет предложено перейти на более дорогой тарифный план. Для особо нагруженных сайтов существуют планы подписок с возможностью размещения файлов шрифта на своих серверах.

• Некоторые сервисы предлагают ежемесячные подписки с неограниченным количеством шрифтов и их начертаний для сайта, но с единственным ограничением на количество просмотров в месяц.

Стоит отметить, что если платный шрифт у вас не используется на странице, но объявлен в css, то каждая загрузка такой страницы будет крутить счетчик показов шрифта.

Цены

Предположим нам нужно купить Helvetica Neue в четырех начертаниях: Normal, Italic, Bold, Bold Italic для сайта с 1,5 млн. просмотров в месяц.

Для сравнения настольной и веб-лицензии: на cайте издательства Linotype по настольной лицензии этот набор обойдется в 116€. Веб-шрифт на 1 500 000 просмотров у Линотайпа обойдется в 309€. В год уже получается 3708€. Это 5133$ в год — невероятно много.

На MyFonts.com уже дешевле — 279$ за 1 500 000, что есть 3348$ в год.

В случае ежемесячной оплаты с ограничением по максимальному количеству Fonts.com просит 78€ (100$) в месяц за 2,5 млн. просмотров. Уже лучше: мы не ограничены количеством начертаний, у нас есть запас на рост посещаемости и всё это стоит 1200$ в год.

Самым выгодным вариантом является Adobe Typekit c его предложением 40$ в месяц за 2 млн. просмотров. Это 480$ в год. Цена уже более менее адекватная, но на неё всё равно согласится не каждый, учитывая, что можно найти бесплатный аналог и избежать этих затрат.

Как видим, цены на одно и то же могут отличаться в 10 раз.

Выводы

Стоимость использования платных шрифтов на нагруженных проектах за несколько лет (а то и месяцев) может превысить стоимость создания дизайна самого сайта.

Так как выбор шрифтов — ответственность дизайнеров, им следует знать, что:

• Использование бесплатных шрифтов упрощает жизнь верстальщикам и владельцам сайта.

• Настольной лицензии недостаточно. Если вы передаёте заказчику шрифты, купленные по настольной лицензии, то это только для того, чтобы заказчик смог пользоваться вашими исходниками. Заказчик не имеет права конвертировать их в веб-шрифты.

• Если дизайнер хочет использовать платный шрифт, ему следует поинтересоваться у заказчика о посещаемости сайта и предупредить о вероятных затратах на использование платных шрифтов, чтобы потом не было сюрпризов.

• Веб-версии шрифтов дешевле арендовать у крупных шрифтовых порталов, чем напрямую у издательств.

• TeX Gyre Heros
• Arimo
• Liberation Sans
• Lato
• Roboto

Победителем вышел TeX Gyre Heros, т.к. он очень похож на Helvetica Neue, поддерживает кириллицу и дополнительно у него есть 4 condenced начертания.

Сравнение шрифтов

Если всё же нужно купить Helvetica Neue для веба, обратите внимание на Adobe Typekit. У них дешевле.

1. Проблема с абсолютными путями: докпад по-умолчанию использует пути к ресурсам от корня домена, а на GH Pages url проекта будет выглядеть так http://username.github.io/repository/. Т.е. сайт находится в папке, а не в корне, и все пути к ресурсам недействительны. Конечно, можно купить собственное доменное имя, но это не мой случай. Нужно, чтобы на локалхосте url оставались абсолютными, а при деплое заменялись с учетом папки, в которую сайт деплоится.
2. Плагин для деплоя не заработал сразу и без настроек, как обещает разработчик.
3. Добавлено 6 мая 2018: деплой из командной строки сломался после включения двухфакторной аутентификации на Гитхабе.

Так как у меня не всё прошло гладко и очевидно, решил написать эту инструкцию.

Проблема с абсолютными путями

Сначала разберёмся с абсолютными путями в докпаде.

Установим плагин Get Url Plugin for DocPad.

Если ещё не создана, сделаем в конфиге докпада переменную @site.url:

    templateData:
        site:
            # The production url of our website. Used in sitemap and rss feed
            url: "http://paulradzkov.github.io/docpad-simpleblog"

И добавим отдельную конфигурацию для «development» окружения:

    # =================================
    # Environments

    environments:
        development:
            templateData:
                site:
                    url: 'http://localhost:9778'

Эта переменная — @site.url — будет подставляться префиксом ко всем путям и ссылкам в зависимости от того, работаем мы на локалхосте или выкатываем сайт на хостинг.

Теперь нужно добавить хелпер «@getUrl()» ко всем «href» и «src» в шаблоне, в документах — везде, где встречаются абсолютные пути.

Например, было:

<!-- DocPad Styles + Our Own -->
<%- @getBlock("styles").add(@site.styles).toHTML() %>

<script src="/vendor/modernizr.js"></script>

Стало:

<!-- DocPad Styles + Our Own -->
<%- @getBlock("styles").add(@getUrl(@site.styles)).toHTML() %>

<script src="<%= @getUrl('/vendor/modernizr.js') %>"></script>

Было:

<ul class="nav-list">
    <li><a href="/"><span>Blog</span></a></li>
    <li><a href="/docs"><span>Documentation</span></a></li>
    <li><a href="https://github.com/paulradzkov/docpad-simpleblog/issues"><span>Issues</span></a></li>
    <li><a href="https://github.com/paulradzkov/docpad-simpleblog"><span>Source Code</span></a></li>
</ul>

Стало:

<ul class="nav-list">
    <li><a href="<%= @getUrl('/') %>"><span>Blog</span></a></li>
    <li><a href="<%= @getUrl('/docs') %>"><span>Documentation</span></a></li>
    <li><a href="https://github.com/paulradzkov/docpad-simpleblog/issues"><span>Issues</span></a></li>
    <li><a href="https://github.com/paulradzkov/docpad-simpleblog"><span>Source Code</span></a></li>
</ul>

Было:

<ul class="meta-data">
    <li class="comments">
        <a href="<%= @document.path %>#disqus_thread" data-disqus-identifier="<%= @document.disqusid %>" >Комментарии</a>
    </li>
    <li class="tags-list">
        <% for tag in @document.tags : %>
            <a class="label-tag" href="<%= @getTagUrl(tag) %>"><%= tag %></a>
        <% end %>
    </li>
</ul>

Стало:

<ul class="meta-data">
    <li class="comments">
        <a href="<%= @getUrl(@document.path) %>#disqus_thread" data-disqus-identifier="<%= @document.disqusid %>" >Комментарии</a>
    </li>
    <li class="tags-list">
        <% for tag in @document.tags : %>
            <a class="label-tag" href="<%= @getUrl(@getTagUrl(tag)) %>"><%= tag %></a>
        <% end %>
    </li>
</ul>

И так далее.

Теперь, когда мы запускаем ‍docpad run‍, ко всем путям подставляется @site.url из девелоперского окружения — http://localhost:9778. А когда ‍docpad run --env static‍, переменная @site.url равна нашему продакшен пути.

Деплой на GitHub Pages

В репозитории создадим ветку «gh-pages». По инструкции это должна быть пустая ветка без истории, но об этом в дальнейшем позаботится плагин для деплоя.

Установим GitHub Pages Deployer Plugin for DocPad.

При попытке выполнить ‍docpad deploy-ghpages --env static‍ у меня появляется ошибка:

Плагин не смог соединиться с моим аккаунтом на гитхабе. Чтобы показать плагину правильный путь с логином и паролем, добавим новый «remote» для репозитория. Для этого в консоли git выполним:

‍git remote add deploy https://login:password@github.com/repo_owner/repo_name.git‍

Где «deploy» — это название удаленного репозитория. Можно выбрать любое, но переопределять «origin» я бы не советовал: у меня от этого локальная копия репозитория потеряла связь с Гитхабом.

«login» и «password» — данные вашего аккаунта на Гитхабе.

«github.com/repo_owner/repo_name.git» — путь к репозиторию проекта, в котором у вас есть права на запись. Это не обязательно должен быть ваш репозиторий, если вы коллаборатор, и у вас есть доступ на запись — вы можете деплоить туда проект.

А в конфиге докпада пропишем настройки для плагина:

    # Plugins configurations
    plugins:
        ghpages:
            deployRemote: 'deploy'
            deployBranch: 'gh-pages'

Теперь можно выкатывать сайт:

‍docpad deploy-ghpages --env static‍

Двухфакторная аутентификация

Добавлено 6 мая 2018

Когда я включил двухфакторную аутентификацию на Гитхабе, деплой из командной строки перестал работать. Чтобы починить, вместо вашего пароля в настройках remote нужно подставить сгенерированный токен. Сгенерируйте его по этой инструкции. Если кратко:

1. На Гитхабе кликните по вашему аватару, потом Settings → Developer settings → Personal access tokens → Generate new token.
2. Дайте токену любое имя, например, «Mac terminal» или «Windows cmd».
3. Поставьте уровень доступа repo.
4. Нажмите Generate token.
5. Скопируйте полученный токен. Когда вы уйдете с этой страницы, токен уже нельзя будет посмотреть.

Вам нужно добавить новый «remote» (или заменить существующий) с токеном вместо пароля:

‍git remote add deploy https://login:token@github.com/repo_owner/repo_name.git‍

И всё снова заработает.

Официальное руководство по синтаксису Markdown мне кажется слишком длинным и не слишком наглядным, поэтому я составил краткое руководство, которое поможет выучить или повторить синтаксис Маркдауна за час.

Кроме традиционного Маркдауна у разработчиков получил распространение дополненный и улучшеный вариант языка — Github Flavoured Markdown, сокращенно GFM.

Основные отличия GFM и чистого Маркдауна:

• добавили таблицы, которых не было в оригинальном Маркдауне;
• добавили альтернативный синтаксис для вставки блоков кода: теперь можно не ставить 4 пробела перед каждой строкой кода, также можно явно указать язык кода;
• добавили зачеркнутый текст.

Полный список отличий на Гитхабе.

# GitHub-Flavored Markdown

## Краткое руководство

Абзацы создаются при помощи пустой строки. Если вокруг текста сверху и снизу есть пустые строки, то текст превращается в абзац.

Чтобы сделать перенос строки вместо абзаца,  
нужно поставить два пробела в конце предыдущей строки.

Заголовки отмечаются диезом `#` в начале строки, от одного до шести. Например:

# Заголовок первого уровня #
## Заголовок h2
### Заголовок h3
#### Заголовок h4
##### Заголовок h5
###### Заголовок h6

В декоративных целях заголовки можно «закрывать» с обратной стороны.

### Списки

Для разметки неупорядоченных списков можно использовать или `*`, или `-`, или `+`:

- элемент 1
- элемент 2
- элемент ...

Вложенные пункты создаются четырьмя пробелами перед маркером пункта:

* элемент 1
* элемент 2
    * вложенный элемент 2.1
    * вложенный элемент 2.2
* элемент ...

Упорядоченный список:

1. элемент 1
2. элемент 2
    1. вложенный
    2. вложенный
3. элемент 3
4. Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

На самом деле не важно как в коде пронумерованы пункты, главное, чтобы перед элементом списка стояла цифра (любая) с точкой. Можно сделать и так:

0. элемент 1
0. элемент 2
0. элемент 3
0. элемент 4

Список с абзацами:

* Раз абзац. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

* Два абзац. Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

* Три абзац. Ea, quis, alias nobis porro quos laborum minus sed fuga odio dolore natus quas cum enim necessitatibus magni provident non saepe sequi?

    Четыре абзац (Четыре пробела в начале или один tab).

### Цитаты

Цитаты оформляются как в емейлах, с помощью символа `>`.

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
>
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.

Или более ленивым способом, когда знак `>` ставится перед каждым элементом цитаты, будь то абзац, заголовок или пустая строка:

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
>
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.

В цитаты можно помещать всё что угодно, в том числе вложенные цитаты:

> ## This is a header.
>
> 1.   This is the first list item.
> 2.   This is the second list item.
>
> > Вложенная цитата.
>
> Here's some example code:
>
>     return shell_exec("echo $input | $markdown_script");

### Исходный код

В чистом Маркдауне блоки кода отбиваются 4 пробелами в начале каждой строки.

Но в GitHub-Flavored Markdown (сокращенно GFM) есть более удобный способ: ставим по три апострофа (на букве Ё) до и после кода. Также можно указать язык исходного кода.

` ` `html
<nav class="nav nav-primary">
  <ul>
    <li class="tab-conversation active">
      <a href="#" data-role="post-count" class="publisher-nav-color" data-nav="conversation">
        <span class="comment-count">0 комментариев</span>
        <span class="comment-count-placeholder">Комментарии</span>
      </a>
    </li>
    <li class="dropdown user-menu" data-role="logout">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <span class="dropdown-toggle-wrapper">
          <span>
            Войти
          </span>
        </span>
        <span class="caret"></span>
      </a>
    </li>
  </ul>
</nav>
` ` `

Самое приятное, что в коде не нужно заменять угловые скобки `< >` и амперсанд `&` на их html-сущности.

### Инлайн код

Для вставки кода внутри предложений нужно заключать этот код в апострофы (на букве Ё). Пример: `<html class="ie no-js">`.

Если внутри кода есть апостроф, то код надо обрамить двойными апострофами: ``There is a literal backtick (`) here.``

### Горизонтальная черта

`hr` создается тремя звездочками или тремя дефисами.

***

### Ссылки

Это встроенная [ссылка с title элементом](http://example.com/link "Я ссылка"). Это — [без title](http://example.com/link).

А вот [пример][1] [нескольких][2] [ссылок][id] с разметкой как у сносок. Прокатит и [короткая запись][] без указания id.

[1]: http://example.com/ "Optional Title Here"
[2]: http://example.com/some
[id]: http://example.com/links (Optional Title Here)
[короткая запись]: http://example.com/short

Вынос длинных урлов из предложения способствует сохранению читабельности исходника. Сноски можно располагать в любом месте документа.

### Emphasis

Выделять слова можно при помощи `*` и `_`. Одним символ для наклонного текста, два символа для жирного текста, три — для наклонного и жирного одновременно.

Например, это _italic_ и это тоже *italic*. А вот так уже __strong__, и так тоже **strong**. А так ***жирный и наклонный*** одновременно.

### Зачеркивание

В GFM добавлено зачеркивание текста: две тильды `~` до и после текста.

~~Зачеркнуто~~

## Картинки

Картинка без `alt` текста

![](http://placehold.it/150x100)

Картинка с альтом и тайтлом:

![Alt text](http://placehold.it/150x100 "Можно задать title")

Запомнить просто: синтаксис как у ссылок, только перед открывающей квадратной скобкой ставится восклицательный знак.

Картинки «сноски»:

![Картинка][image1]
![Картинка][image2]
![Картинка][image3]

[image1]: http://placehold.it/250x100
[image2]: http://placehold.it/200x100
[image3]: http://placehold.it/150x100

Картинки-ссылки:

[![Alt text](http://placehold.it/150x100)](http://example.com/)


## Использование HTML внутри Markdown

Mожно смешивать Markdown и HTML. Если на какие-то элементы нужно поставить классы или атрибуты, смело используем HTML:

> Выделять слова можно при помощи * и _ . Например, это <em class="a1">italic</em> и это тоже <i class="a1">italic</i>. А вот так уже <b>strong</b>, и так тоже <strong>strong</strong>.

Можно и наоборот, внутри HTML-тегов использовать Маркдаун.

<section class="someclass">

### Пример Маркдауна внутри HTML

Выделять слова можно при помощи `*` и `_` . Например, это _italic_ и это тоже *italic*. А вот так уже __strong__, и так тоже **strong**.

</section>

### Таблицы

В чистом Маркдауне нет синтаксиса для таблиц, а в GFM есть.

First Header  | Second Header
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell

Для красоты можно и по бокам линии нарисовать:

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

Можно управлять выравниванием столбцов при помощи двоеточия.

| Left-Aligned  | Center Aligned  | Right Aligned |
|:------------- |:---------------:| -------------:|
| col 3 is      | some wordy text |     **$1600** |
| col 2 is      | centered        |         $12   |
| zebra stripes | are neat        |        ~~$1~~ |

Внутри таблиц можно использовать ссылки, наклонный, жирный или зачеркнутый текст.

Для всего остального есть обычный HTML.

Для создания демки использован Live Markdown Editor.

Дополнительные функции:

• Ctrl/Cmd + S — сохранить маркдаун-код как файл;
• Ctrl/Cmd + Shift + S — выбрать, как сохранить: макрдаун или html;
• Перетянуть файл в панель кода, чтобы загрузить его;
• Контент файла сохраняется в URL, чтобы можно было поделиться ссылкой.

На мой взгляд, между «Планктоном» и «Суперзвёздами» должны быть «Мастера», которые замечают все проблемы, советуются с дизайнерами, предлагают варианты, но не требуют «нарисовать макетик» и, пока ещё, не берут на себя ответственность дорабатывать макет самостоятельно. Таким специалистам достаточно на словах объяснить, что будет в крайних ситуациях и как должны вести себя элементы сайта в непрорисованных состояниях. Они всё поймут и сделают как надо.

А вот о каких дизайнерах мечтают верстальщики…

Бывает дизайнер-Суперзвезда, который отдаёт 15 страниц макета и страницу, на которой прорисованы все базовые элементы: заголовки, списки, цитаты, таблички, формы с полями ввода, чекбоксами и кнопочками.

Сверстаешь такую страницу, а дальше все остальные пятнадцать страниц автоматически «собираются» пиксель-в-пиксель как на макете, только теги добавляй и новые стили дописывай. И в стилях при этом ничего не приходится обнулять, переписывать, идти на компромисcы.

И каждая страница макета согласуется с сеткой, которую выбрал для сайта дизайнер, и тебе не приходится подгонять размеры элементов от страницы к странице. А на полях макетов прорисованы разные состояния элементов.

И ты знаешь, что если в исходнике растровый слой, его надо нарезать картинкой, а если векторный — верстать, используя CSS. И каждый растровый элемент сайта или склеен в один слой, или является смарт-объектом. И нет в макете скрытых слоёв, которые не пригодились дизайнеру, а все растровые фоны даны с запасом на резину. И все шейпы попадают в пиксели. И тени на элементах в нормальном режиме наложения, а не каком-нибудь «Multiply». И вообще в слоях порядок.

Плюс ко всему этому прилагаются нестандартные шрифты из макета, чтобы верстальщик не искал их двадцать минут в интернете, и сторонние иконки, чтобы не нарезать их снова.

И оказывается, что 15 страниц — не так уж много. И верстаются они легко и быстро, что даже кажется, будто тебя обманули, что этот проект уже когда-то был свёрстан, а потом дизайнер его заскриншотил и заново отрисовал.

Такой дизайнер способен подтянуть верстальщика на новый уровень всего за несколько проектов.

А ещё можно сохранять в гифки смешные моменты из фильмов.

Пользоваться легко, смотрите сами:

Настроек минимум, но есть всё самое необходимое: можно настроить область захвата с точностью до пикселя, выбрать количество кадров в секунду, количество повторений GIF-анимации, показывать при записи клики или нет, показывать секундомер на гифке.

Если 256 цветов на кадр не хватает, можно сделать захват в собственный формат программы .LCF и потом воспроизвести и отрендерить в видео формат при помощи другой, уже платной, программы этого же разработчика.

LICEcap бесплатна. Есть версия для Windows и OS X.

Скачать с сайта разработчика

Ведь не очень красиво, когда в ультратонком шрифте появляются жирные кляксы тегов strong.

Возьмём для примера Open Sans.

Основной текст имеет начертание Light 300, заголовки и цитаты — Normal 400, а промо-блок — Semi-Bold 600:

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
h1, h2, h3, h4, h5, h6,
blockquote {
  font-weight: 400;
}
.promo {
  font-weight: 600;
}

Тег strong может встечаться и в основном тексте, и в цитатах, и промо-блоке. Надо это учесть.

По-умолчанию:

strong, b {
    font-weight: bold; /* bold = 700 */
}

А нам хочется, чтобы у strong и b для основного текста было Normal 400, для цитат и заголовков — Bold 700, а для промо блока — Extra-Bold 800. Это сохранит контраст между жирным и нежирным текстом примерно равным во всех случаях.

Уверен, многие пробовали использовать strong {font-weight: bolder;}, но это не принесло ожидаемого результата — текст стал ещё жирнее, чем ожидалось.

А всё потому, что согласно спецификации, значение bolder (lighter) увеличивает (уменьшает) унаследованное значение font-weight до следующего возможного для данного шрифта значения, согласно следующей таблице.

Но в браузерной CSS прописано strong, b {font-weight:bold;}, т.е. унаследуется значение «700», а потом оно ещё и увеличивается до «900». Поэтому кажется, что bolder работает неправильно.

Добавлено 22 января 2016

На самом деле это был баг и он присутствовал во всех браузерах на момент написания статьи. Позже баги в браузерах были исправлены. А мой пулл-реквест был принят в normalize.css.

Исправить это можно так:

/* сбрасываем стандартное «bold»,
шрифт становится таким же как его родительский элемент */
strong, b {
  font-weight: inherit;
}

/* теперь bolder будет вычисляться исходя из веса шрифта родительского элемента */
strong, b {
  font-weight: bolder;
}

Именно так, как два отдельных правила. Первое обнуляет значение font-weight из браузерной таблицы стилей, второе задаёт жирность уже в относительных, а не абсолютных единицах.

Теперь нам не придётся заботиться о вложенности элементов — каскад всё сделает автоматически. Мы можем вкладывать теги strong друг в друга.

Ограничения

Используя относительные значения font-weight мы получаем только по три градации жирности шрифта для bolder и lighter соответственно. Спецификация не гарантирует, что браузеры правильно сопоставят названия начертаний и числовые значения. Не гарантирует, что для шрифта найдётся более жирное или более тонкое начертание. У некоторых шрифтов всего два начертания, у некоторых может быть восемь.

Единственной гарантией при использовании bolder / lighter является то, что шрифт при значении «bolder» не будет тоньше, чем более легкие начертания этого шрифта, а при значении «lighter» будет не толще, чем более жирные начертания этого шрифта.

Чтобы более тонко настроить вес шрифта, надо использовать абсолютные значения.

Баги

Если у вас шрифт установлен в системе, но не подключен через @font-face, то Google Chrome определяет только Normal и Bold начертания шрифта. Чтобы локальный шрифт заработал, нужно дополнительно указать его font-family.

.fw300 {
  font-family: "Open Sans Light", "Open Sans";
  font-weight: 300;
}
.fw600 {
  font-family: "Open Sans SemiBold", "Open Sans";
  font-weight: 600;
}

«Если у Вас возникли любые вопросы касательно вашего заказа, пожалуйста, свяжитесь со Службой поддержки по телефону XXXX XXX XXXX или напишите по адресу customerservices@sitename.com. Не забудьте сообщить ваш номер заказа.

Создавая шаблоны для таких писем, не поленитесь прописать этот самый номер заказа (и любую другую нужную службе поддержки информацию) в параметры mailto ссылки:

<a href="mailto:customerservices@sitename.com?subject=Заказ XXXXX&amp;body=Мой номер заказа XXXXX">customerservices@sitename.com</a>

Теперь при клике на адрес электронной почты в новом сообщении номер заказа подставится и в тему письма, и в текст сообщения.

Мелочь, но она сэкономит вашим покупателям пару лишних действий. Особенно актуально это для тех, кто пишет письмо с мобильника.

То есть, что комбинировать псевдоклассы можно, я знал, но не догадывался попробовать провернуть это со ссылками и не ожидал, что это сработает.

a:link          {color:#0267FF}
a:visited       {color:#B413D3}
a:hover         {color:#004DC0}
a:visited:hover {color:#9501B3}
a:focus         {color:#004DC0}
a:visited:focus {color:#770081}
a:active        {color:#000000}

Пример

Например:

p:not(.classy) { color: red; }

Ну окей, думаю я, в моей практике не встречались такие ситуации. Обходились мы ведь как-то раньше без :not. Приходилось немного переписать структуру селекторов или обнулить пару значений.

Пример 1. Элемент без класса

Селектор :not может быть крайне полезен, когда нам нужно застилить контент сгенерированный пользователем (нет возможности расставить в нем классы), или когда у нас контента очень много и расставлять в нем классы слишком трудоёмко.

Например, мы хотим на сайте сделать красивые буллиты для ненумерованных списков ul li. Мы пишем код:

ul li { /* наши красивые стили */ }

В результате, наши красивые буллиты появляются не только в контенте, но и, например, в навигации, где тоже используются ul li.

Мы ограничиваем область действия селектора:

.content ul li { /* красота */ }

Навигацию мы спасли, но ненужные буллиты всё еще вылазят на слайдерах, списках новостей и других конструкциях внутри .content, где тоже используются ul li.

Далее у нас варианты:

1) обнулить мешающие стили в слайдерах и других местах. Но это противоречит «DRY» и является одним из признаков «вонючего» кода. К тому же не решает проблему раз и навсегда: добавите, например, аккордеон и списки в нем снова придется обнулять.

2) пойти от обратного и ставить класс всем спискам, которые нужно стилизовать:

.textlist li { /* красота */ }

Это добавляет лишней работы по расстановке классов в контенте. Иногда имеет смысл, но лишнюю работу никто не любит.

3) стилизовать только те ul li, у которых нет никаких классов вообще:

ul:not([class]) li { /* красота */ }

Победа! Нам не нужно делать дополнительную работу по расстановке классов в контенте. А на слайдерах, аккордеонах и прочих конструкциях, которые не должны выглядеть как списки, но используют их в своей разметке, в 99% случаев уже будут свои классы, и наши стили их не затронут.

Этот прием — «выбирать только элементы без класса» — очень полезен для оформления пользовательского контента и его можно применять не только к спискам, но и для других случаев.

Пример 2. Изменение внешнего вида всех элементов, кроме наведенного

Такой эффект можно реализовать без :not путем перезаписи значений. И это будет работать в бо́льшем количестве браузеров.

/* с перезаписью свойств */
ul:hover li {
  opacity:0.5;
}
ul:hover li:hover {
  opacity:1;
}

Но если придется обнулять слишком много свойств, то есть смысл использовать :not.

/* используя :not() */
ul:hover li:not(:hover) {
  opacity:0.5;
}

Пример 3. Меню с разделителями между элементами

Как и в предыдущем примере, желаемого можно добиться несколькими способами.

Через перезапись свойств. Но тут два правила вместо одного, что не есть «DRY».

.menu-item:after {
  content: ' | ';
}
.menu-item:last-child:after {
  content: none;
}

Через :nth-last-child(). Одно правило, но тяжело читается.

.menu-item:nth-last-child(n+2):after {
  content: ' | ';
}

Через :not() — самая короткая и понятная запись.

.menu-item:not(:last-child):after {
  content: ' | ';
}

Пример 4. Debug css

Удобно для отладки и самоконтроля искать/подсвечивать картинки без alt, label без for и другие ошибки.

/* подсвечиваем теги без необходимых атрибутов */
img:not([alt]),
label:not([for]),
input[type=submit]:not([value]) {
  outline:2px solid red;
}

/* тревога, если первый child внутри списка не li и прочие похожие примеры */
ul > *:not(li),
ol > *:not(li),
dl > *:not(dt):not(dd) {
  outline:2px solid red;
}

Пример 5. Поля форм

Раньше текстовых полей форм было не много. Достаточно было написать:

select,
textarea,
[type="text"],
[type="password"] {
    /* стили для текстовых полей ввода */
}

С появлением новых типов полей в HTML5 этот список увеличился:

select,
textarea,
[type="text"],
[type="password"],
[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="number"],
[type="search"],
[type="tel"],
[type="time"],
[type="url"],
[type="month"],
[type="week"] {
  /* стили для текстовых полей ввода */
}

Вместо перечисления 14 типов инпутов можно исключить 8 из них:

select,
textarea,
[type]:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]) {
  /* стили для текстовых полей ввода */
}

Ладно, этот пример не очень красив, и я рекомендую всё же первый вариант с перечислением, он работает с IE8+, а второй вариант с IE9+.

Поддержка

Следует заметить, что согласно спецификации в скобках селектора :not() может стоять только простой селектор и в скобках нельзя использовать сам селектор :not(). Если нужно исключить несколько элементов, :not() можно повторить несолько раз, как в примере 5.

Если очень нужны CSS3-селекторы в браузерах, которые их не поддерживают, можно использовать полифил selectivizr.

Для дефолтных браузерных стилей характерно такое поведение: если картинка обтекает список слева, маркеры списка налазят на картинку. От этого можно избавиться незначительно переписав стили.

демка

Старое решение

Эту проблему можно решить, но придется переписать все отступы для тегов ul, ol и li. Так как ul > li могут использоваться не только для текста с маркерами, но и для менюшек, слайдеров, списков новостей и других семантических конструкций, задавать стили напрямую тегам ol, ul и li опасно. Иначе в дальнейшем придется слишком часто эти стили обнулять. Поэтому создадим отдельный класс .textlist, чтобы ставить его на наши ul и ol.

.textlist {
    margin: 0;
    padding: 0;
}
.textlist > li {
    margin: 0;
    padding-left: 2em;
    list-style-position: inside;
    text-indent:-1em;
    overflow: hidden;
}

overflow: hidden  тут нам нужен для того, чтобы запретить тексту обтекание картинки по строкам внутри li. Теперь каждая li обтекает картинку как прямоугольный блок.

list-style-position: inside  чтобы втянуть маркер списка внутрь блока.

А всё остальное, чтобы отступы выглядели как раньше.

---

Новое решение

Обновлено 11 июня 2017. Пофикшен баг с наплывом маркеров на картинку при первой загрузке или когда выключен кэш.

Для списков, у которых нет классов, перенесём дефолтный отступ 2.5em с левого края на правый, а сами li сдвинем на те же 2.5em вправо при помощи transform: translateX(2.5em).

ul:not([class]),
ol:not([class]) {
    padding-left: 0;
    padding-right: 2.5em;
}
ul:not([class]) li,
ol:not([class]) li {
    transform: translateX(2.5em);
    animation: fixlists 1s;
}

@keyframes fixlists {
    0% {
        text-indent: -0.001em;
    }
    100% {
        text-indent: 0;
    }
}

Списки, не имеющие класса, мы выбираем, чтобы не повредить меню, слайдеры и прочие конструкции, которые используют ul li в своей структуре. Подробнее про это в посте про селектор :not().

В отличие от старого решения, элементы списка обтекают картинку естественным образом, не оставляя зазоров под картинкой.

Чтобы починить баг в Хроме, Опере и других браузерах на движке Blink, пришлось добавить невидимую анимацию. Она заставляет браузер пересчитать размеры элементов списка и поставить маркеры на место.

Живой пример:

В модуле «CSS4-UI» есть такое свойство — pointer-events.

pointer-events: none — элемент перестанет реагировать на hover, click и другие события мыши. Он станет «прозрачным» для взаимодействия, а hover и click будут передаваться элементу, лежащему под ним.

pointer-events: auto — (значение по-умолчанию) включает стандартное поведение элемента.

Изначально свойство «pointer-events» было введено для SVG и должно было стать частью CSS3, но было перенесено в спецификацию CSS4. Кроме «none» и «auto» есть еще несколько значений, но они применимы только к SVG, и мы не будем их рассматривать.

Несмотря на то, что свойство относится к CSS4, pointer-events поддерживается уже большим количеством браузеров и довольно давно. Не работает в IE ниже 11 версии и в Opera Presto. А значит, его можно осторожно использовать для улучшения юзабилити в рамках прогрессивного улучшения.

Проверить, поддерживается ли это свойство браузером, можно с помощью специального теста для Modernizer.

Пример 1

Рассмотрим на практике.

В первом примере для белого градиента, накрывающего текст, pointer-events установлен в none. Текст легко выделяется мышью сквозь градиент. Даже курсор меняет свою форму со стрелки на выделение текста.

Во втором примере pointer-events не задан, маска градиента не даёт выделить текст, курсор имеет форму стрелки, как для нетекстовых элементов.

Пример 2

Задача: сделать так, чтобы ссылка в меню становилась некликабельной, если она ведет на эту же страницу.

Обычно в CMS уже есть какой-либо класс для индикации текущей страницы в меню. Допишем ему pointer-events:

.demo-menu a.current {
    background: #AAA;
    color: #333;
    pointer-events: none; /* disables click event */
}

В настройках Chrome Developer Tools запрятано много полезных, не сразу заметных, опций. Самые часто используемые — это отключение яваскрипта и отключение кэша.

Чтобы попасть в настройки, откроем Developer Tools (F12) и нажмем иконку шестеренки в заголовке справа (F1).

Обратите внимание группу опций «Rendering». «Show paint rectangles» — позволяет увидеть, какие области перерисовывает браузер в ответ на какие-либо события или в результате работы скриптов. Полезно для профилирования и оптимизации.

Из горячих клавиш для меня оказались самыми полезными:

• Ctrl + Shift + C — инспектировать элемент страницы,
• Ctrl + Shift + F — поиск по всем ресурсам страницы,
• F2 — редактировать как html.

Демка

Напишем стили для строчного тега del и подготовим класс для перечёркивания блочных элементов .del-cross.

del.cross {
    display:inline-block; /* запрещает перенос текста на следующую строку */
    text-decoration:none;
    position:relative;
}

.del-cross {
    display:block;
    position:relative;
    overflow:hidden; /* запрещает обтекать другие блоки */
}

del.cross:before,
.del-cross:before {
    content:'';
    position:absolute;
    display:block;
    width:auto;
    height:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background: rgba(0,0,0,0) url(cross.svg) no-repeat;
    background-size:100% 100%; /* растягивает фон на всю ширину и высоту блока */
}

Пример:

Для картинок класс .del-cross нужно ставить на их обёртку. Тег img не имеет псевдокласса :before.

А теперь посмотрим, что внутри SVG-файла, и как настроить цвет и толщину линий.

cross_old.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none" style="stroke: rgba(255,0,0,0.9); stroke-width: 1.5" >
    <line x1="0" y1="0"   x2="100" y2="100" vector-effect="non-scaling-stroke" />
    <line x1="0" y1="100" x2="100" y2="0"   vector-effect="non-scaling-stroke" />
</svg>

viewBox="0 0 100 100" — задает виртуальный размер картинки 100×100 безразмерных единиц. Формат записи: x1 y1 x2 y2.

preserveAspectRatio="none" — отключает сохранение пропорций при масштабировании.

vector-effect="non-scaling-stroke" — чтобы толщина линий не зависела от размеров картинки. К сожалению, не работает в IE9 и IE10.

style="stroke: rgba(255,0,0,0.9); stroke-width: 1.5" — цвет линий можно задавать как в hex, так и в rgba с прозрачностью, а толщину линий делать дробной.

Поддержка браузерами

SVG не поддерживается IE8 и ниже. Да и в IE9-IE10 толщина линий изменяется пропорционально размерам перечёркиваемого блока, что есть баг. Есть решение.

Для браузеров, не поддерживающих SVG, можно сделать деградацию с помощью условных комментариев или наоборот, используя Modernizer, сделать прогрессивное улучшение только для тех, кто умеет отображать SVG.

Обновлено 9 апреля 2013

В комментариях GreLI подсказал, что SVG-файл можно сократить до такого вида (cross.svg):

<svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgba(255,0,0,0.9); stroke-width: 1.5" >
    <line x1="0" y1="0"    x2="100%" y2="100%" />
    <line x1="0" y1="100%" x2="100%" y2="0"    />
</svg>

Задавая координаты линий в процентах, мы избавляемся от необходимости применять vector-effect="non-scaling-stroke", который не работает в IE9 и IE10.

Как это работает?

Для начала устанавливаем приложение Adobe Shadow для Windows или Mac. Оно должно быть включено во время отладки, без него работать не будет.

Добавлено. Теперь продукт называется Adobe Edge Inspect.

Ставим плагин Adobe Shadow в Google Chrome.

На мобильные устройства ставим соответствующие приложения из Плей Маркета или АппСтора.

Все устройства должны находиться в одной wifi сети. Запускаем мобильные приложения, вводим коды для синхронизации. Всё готово к работе.

Теперь можно серфить по сайтам с основного компа, а на подключенных устройствах будут открываться те же страницы. При этом используется движок родного браузера iOS или Android, но внутри приложения Shadow.

Чтобы вызвать инспектор кода, нужно в выпадающем меню плагина Adobe Shadow кликнуть иконку <> напротив интересующего устройства.

Можно проводить отладку сайтов на локалхосте. Только в браузере на компе нужно вводить не http://localhost, а IP-адрес компьютера, например, http://192.168.0.101:3000.

А вот просто локальные файлы типа file://website/index.html мобильное приложение не открывает. Нужно использовать или локальный веб-сервер, или поместить такие файлы, например, в паблик-папку dropbox и открывать их из интернета.

В общем, рекомендую Adobe Shadow всем разработчикам, кто верстает под различные устройства. Успехов в создании сайтов с отзывчивой вёрсткой!

Нам помогут горячие клавиши:

• Alt + [ — перейти на слой ниже.
• Alt + ] — перейти на слой выше.
• Alt + Shift + [ — добавить к выбранным слой ниже.
• Alt + Shift + ] — добавить к выбранным слой выше.

Эти команды оперируют только с видимыми слоями и пропускают выключенные.

Ну и заодно вспомним другие не менее полезные сочетания:

• Ctrl + [ — переместить слой ниже.
• Ctrl + ] — переместить слой выше.
• Ctrl + Shift + [ — переместить слой на самый низ.
• Ctrl + Shift + ] — переместить слой на самый верх.

Но свойство content: '\203A'; отображает HTML-сущности так, как они записаны в CSS, не заменяет их на специальные символы. Например, напишем в CSS content: '→';, получим в браузере «&rarr;» вместо «→». Поэтому писать спецальные символы в content нужно 4-значными UTF-кодами (UTF-16 hex), экранированными обратным слэшем.

Пример CSS-кода:

p.readmore a:after {
    content: '\203A'; /* выведет › */
    position: absolute;
    right: 0.8em;
    top: 4px;
    display: block;
}

Таблица символов

Символ	HTML-entity	UTF-код	Название
Кавычки
‹	‹	\2039	single left-pointing angle quotation mark
›	›	\203A	single right-pointing angle quotation mark
«	«	\00AB	left-pointing double angle quotation mark = left pointing guillemet
»	»	\00BB	right-pointing double angle quotation mark = right pointing guillemet
‚	‚	\201A	single bottom quotation mark
‘	‘	\2018	left single quotation mark
’	’	\2019	right single quotation mark
„	„	\201E	bottom double quotation mark
“	“	\201C	left double quotation mark
”	”	\201D	right double quotation mark
"	"	\0022	APL quote (прямая программистская кавычка с клавиатуры)
′	′	\2032	prime = minutes = feet
″	″	\2033	double prime = seconds = inches
Тире и другие знаки препинания
—	—	\2014	em dash
–	–	\2013	en dash
…	…	\2026	horizontal ellipsis = three dot leader
¡	¡	\00A1	inverted exclamation mark
¿	¿	\00BF	inverted question mark = turned question mark
Стрелки
←	←	\2190	leftwards arrow
→	→	\2192	rightwards arrow
↑	↑	\2191	upwards arrow
↓	↓	\2193	downwards arrow
⇐	⇐	\21D0	leftwards double arrow
⇒	⇒	\21D2	rightwards double arrow
⇑	⇑	\21D1	upwards double arrow
⇓	⇓	\21D3	downwards double arrow
↔	↔	\2194	left right arrow
⇔	⇔	\21D4	left right double arrow
↵	↵	\21B5	downwards arrow with corner leftwards = carriage return
Буллиты
•	•	\2022	bullet
·	·	\00B7	middle dot
⋅	⋅	\22C5	dot operator
∗	∗	\2217	low asterisk
♣	♣	\2663	black club suit
♦	♦	\2666	black diamond suit
♥	♥	\2665	black heart suit
♠	♠	\2660	black spade suit
◊	◊	\25CA	lozenge
Пробельные символы
m m		\0020	обыкновенный пробел
m m	 	\00A0	no-break space = non-breaking space
n n	 	\2002	en space
m m	 	\2003	em space
_ _	 	\2009	thin space
_‍_	‍	\200D	zero width joiner
_‌_	‌	\200C	zero width non-joiner
Математические символы
×	×	\00D7	multiplication sign
÷	÷	\00F7	division sign
⁄	⁄	\2044	fraction slash
−	−	\2212	minus sign
±	±	\00B1	plus-minus sign = plus-or-minus sign
<	&lt;	\003C	less-than sign
>	&gt;	\003E	greater-than sign
≤	&le;	\2264	less-than or equal to
≥	&ge;	\2265	greater-than or equal to
≈	&asymp;	\2248	almost equal to = asymptotic to
≅	&cong;	\2245	approximately equal to
≡	&equiv;	\2261	identical to
≠	&ne;	\2260	not equal to
°	&deg;	\00B0	degree sign
½	&frac12;	\00BD	vulgar fraction one half = fraction one half
¼	&frac14;	\00BC	vulgar fraction one quarter = fraction one quarter
¾	&frac34;	\00BE	vulgar fraction three quarters = fraction three quarters
¹	&sup1;	\00B9	superscript one = superscript digit one
²	&sup2;	\00B2	superscript two = superscript digit two = squared
³	&sup3;	\00B3	superscript three = superscript digit three = cubed
&	&amp;	\0026	ampersand
∼	&sim;	\223C	tilde operator = varies with = similar to
∧	&and;	\2227	logical and = wedge
∨	&or;	\2228	logical or = vee
¬	&not;	\00AC	not sign
ℵ	&alefsym;	\2135	alef symbol = first transfinite cardinal
∠	&ang;	\2220	angle
∩	&cap;	\2229	intersection = cap
∪	&cup;	\222A	union = cup
⊂	&sub;	\2282	subset of
⊆	&sube;	\2286	subset of or equal to
⊃	&sup;	\2283	superset of
⊇	&supe;	\2287	superset of or equal to
∋	&ni;	\220B	contains as member
∈	&isin;	\2208	element of
∉	&notin;	\2209	not an element of
⊄	&nsub;	\2284	not a subset of
∃	&exist;	\2203	there exists
ƒ	&fnof;	\0192	latin small f with hook = function = florin
∀	&forall;	\2200	for all
∞	&infin;	\221E	infinity
∫	&int;	\222B	integral
∗	&lowast;	\2217	asterisk operator
µ	&micro;	\00B5	micro sign
∇	&nabla;	\2207	nabla = backward difference
∂	&part;	\2202	partial differential
⊥	&perp;	\22A5	up tack = orthogonal to = perpendicular
∏	&prod;	\220F	n-ary product = product sign
∝	&prop;	\221D	proportional to
√	&radic;	\221A	square root = radical sign
⋅	&sdot;	\22C5	dot operator
∑	&sum;	\2211	n-ary sumation
∅	&empty;	\2205	empty set = null set = diameter
⊕	&oplus;	\2295	circled plus = direct sum
⊗	&otimes;	\2297	circled times = vector product
∴	&there4;	\2234	therefore
⟨	&lang;	\2329	left-pointing angle bracket = bra
⟩	&rang;	\232A	right-pointing angle bracket = ket
⌈	&lceil;	\2308	left ceiling = apl upstile
⌊	&lfloor;	\230A	left floor = apl downstile
⌉	&rceil;	\2309	right ceiling
⌋	&rfloor;	\230B	right floor
Знаки валют
¤	&curren;	\00A4	currency sign
¢	&cent;	\00A2	cent sign
€	&euro;	\20AC	euro sign
£	&pound;	\00A3	pound sign
¥	&yen;	\00A5	yen sign = yuan sign
Прочие символы
©	&copy;	\00A9	copyright sign
™	&trade;	\2122	trade mark sign
®	&reg;	\00AE	registered sign = registered trade mark sign
§	&sect;	\00A7	section sign
¦	&brvbar;	\00A6	broken bar = broken vertical bar
†	&dagger;	\2020	dagger
‡	&Dagger;	\2021	double dagger
ℑ	&image;	\2111	blackletter capital I = imaginary part
ℜ	&real;	\211C	blackletter capital R = real part symbol
℘	&weierp;	\2118	script capital P = power set = Weierstrass p
‾	&oline;	\203E	overline = spacing overscore
ª	&ordf;	\00AA	feminine ordinal indicator
º	&ordm;	\00BA	masculine ordinal indicator
¶	&para;	\00B6	pilcrow sign = paragraph sign
‰	&permil;	\2030	per mille sign
­	&shy;	\00AD	soft hyphen = discretionary hyphen
‎‎	&lrm;‎	\200E	left-to-right mark (for formatting only)
‏‏	&rlm;‏	\200F	right-to-left mark (for formatting only)
Греческий алфавит
Α	&Alpha;	\0391	greek capital letter alpha
α	&alpha;	\03B1	greek small letter alpha
Β	&Beta;	\0392	greek capital letter beta
β	&beta;	\03B2	greek small letter beta
Γ	&Gamma;	\0393	greek capital letter gamma
γ	&gamma;	\03B3	greek small letter gamma
Δ	&Delta;	\0394	greek capital letter delta
δ	&delta;	\03B4	greek small letter delta
Ε	&Epsilon;	\0395	greek capital letter epsilon
ε	&epsilon;	\03B5	greek small letter epsilon
Ζ	&Zeta;	\0396	greek capital letter zeta
ζ	&zeta;	\03B6	greek small letter zeta
Η	&Eta;	\0397	greek capital letter eta
η	&eta;	\03B7	greek small letter eta
Θ	&Theta;	\0398	greek capital letter theta
θ	&theta;	\03B8	greek small letter theta
ϑ	&thetasym;	\03D1	greek small letter theta symbol
Ι	&Iota;	\0399	greek capital letter iota
ι	&iota;	\03B9	greek small letter iota
Κ	&Kappa;	\039A	greek capital letter kappa
κ	&kappa;	\03BA	greek small letter kappa
Λ	&Lambda;	\039B	greek capital letter lambda
λ	&lambda;	\03BB	greek small letter lambda
Μ	&Mu;	\039C	greek capital letter mu
μ	&mu;	\03BC	greek small letter mu
Ν	&Nu;	\039D	greek capital letter nu
ν	&nu;	\03BD	greek small letter nu
Ξ	&Xi;	\039E	greek capital letter xi
ξ	&xi;	\03BE	greek small letter xi
Ο	&Omicron;	\039F	greek capital letter omicron
ο	&omicron;	\03BF	greek small letter omicron
Π	&Pi;	\03A0	greek capital letter pi
π	&pi;	\03C0	greek small letter pi
ϖ	&piv;	\03D6	greek pi symbol
Ρ	&Rho;	\03A1	greek capital letter rho
ρ	&rho;	\03C1	greek small letter rho
Σ	&Sigma;	\03A3	greek capital letter sigma
σ	&sigma;	\03C3	greek small letter sigma
ς	&sigmaf;	\03C2	greek small letter final sigma (note)
Τ	&Tau;	\03A4	greek capital letter tau
τ	&tau;	\03C4	greek small letter tau
Υ	&Upsilon;	\03A5	greek capital letter upsilon
υ	&upsilon;	\03C5	greek small letter upsilon
ϒ	&upsih;	\03D2	greek upsilon with hook symbol
Φ	&Phi;	\03A6	greek capital letter phi
φ	&phi;	\03C6	greek small letter phi
Χ	&Chi;	\03A7	greek capital letter chi
χ	&chi;	\03C7	greek small letter chi
Ψ	&Psi;	\03A8	greek capital letter psi
ψ	&psi;	\03C8	greek small letter psi
Ω	&Omega;	\03A9	greek capital letter omega
ω	&omega;	\03C9	greek small letter omega
Диакритические знаки
´	&acute;	\00B4	acute accent = spacing acute
¸	&cedil;	\00B8	cedilla = spacing cedilla
ˆ	&circ;	\02C6	modifier letter circumflex accent
¯	&macr;	\00AF	macron = spacing macron = overline = APL overbar
·	&middot;	\00B7	middle dot = Georgian comma = Greek middle dot
˜	&tilde;	\02DC	small tilde
¨	&uml;	\00A8	diaeresis = spacing diaeresis
Латиница с диакритическими знаками
Á	&Aacute;	\00C1	latin capital letter A with acute
á	&aacute;	\00E1	latin small letter a with acute
Â	&Acirc;	\00C2	latin capital letter A with circumflex
â	&acirc;	\00E2	latin small letter a with circumflex
Æ	&AElig;	\00C6	latin capital letter AE = latin capital ligature AE
æ	&aelig;	\00E6	latin small letter ae = latin small ligature ae
À	&Agrave;	\00C0	latin capital letter A with grave = latin capital letter A grave
à	&agrave;	\00E0	latin small letter a with grave = latin small letter a grave
Å	&Aring;	\00C5	latin capital letter A with ring above = latin capital letter A ring
å	&aring;	\00E5	latin small letter a with ring above = latin small letter a ring
Ã	&Atilde;	\00C3	latin capital letter A with tilde
ã	&atilde;	\00E3	latin small letter a with tilde
Ä	&Auml;	\00C4	latin capital letter A with diaeresis
ä	&auml;	\00E4	latin small letter a with diaeresis
Ç	&Ccedil;	\00C7	latin capital letter C with cedilla
ç	&ccedil;	\00E7	latin small letter c with cedilla
É	&Eacute;	\00C9	latin capital letter E with acute
é	&eacute;	\00E9	latin small letter e with acute
Ê	&Ecirc;	\00CA	latin capital letter E with circumflex
ê	&ecirc;	\00EA	latin small letter e with circumflex
È	&Egrave;	\00C8	latin capital letter E with grave
è	&egrave;	\00E8	latin small letter e with grave
Ð	&ETH;	\00D0	latin capital letter ETH
ð	&eth;	\00F0	latin small letter eth
Ë	&Euml;	\00CB	latin capital letter E with diaeresis
ë	&euml;	\00EB	latin small letter e with diaeresis
Í	&Iacute;	\00CD	latin capital letter I with acute
í	&iacute;	\00ED	latin small letter i with acute
Î	&Icirc;	\00CE	latin capital letter I with circumflex
î	&icirc;	\00EE	latin small letter i with circumflex
Ì	&Igrave;	\00CC	latin capital letter I with grave
ì	&igrave;	\00EC	latin small letter i with grave
Ï	&Iuml;	\00CF	latin capital letter I with diaeresis
ï	&iuml;	\00EF	latin small letter i with diaeresis
Ñ	&Ntilde;	\00D1	latin capital letter N with tilde
ñ	&ntilde;	\00F1	latin small letter n with tilde
Ó	&Oacute;	\00D3	latin capital letter O with acute
ó	&oacute;	\00F3	latin small letter o with acute
Ô	&Ocirc;	\00D4	latin capital letter O with circumflex
ô	&ocirc;	\00F4	latin small letter o with circumflex
Œ	&OElig;	\0152	latin capital ligature OE
œ	&oelig;	\0153	latin small ligature oe
Ò	&Ograve;	\00D2	latin capital letter O with grave
ò	&ograve;	\00F2	latin small letter o with grave
Ø	&Oslash;	\00D8	latin capital letter O with stroke = latin capital letter O slash
ø	&oslash;	\00F8	latin small letter o with stroke, = latin small letter o slash
Õ	&Otilde;	\00D5	latin capital letter O with tilde
õ	&otilde;	\00F5	latin small letter o with tilde
Ö	&Ouml;	\00D6	latin capital letter O with diaeresis
ö	&ouml;	\00F6	latin small letter o with diaeresis
Š	&Scaron;	\0160	latin capital letter S with caron
š	&scaron;	\0161	latin small letter s with caron
ß	&szlig;	\00DF	latin small letter sharp s = ess-zed
Þ	&THORN;	\00DE	latin capital letter THORN
þ	&thorn;	\00FE	latin small letter thorn
Ú	&Uacute;	\00DA	latin capital letter U with acute
ú	&uacute;	\00FA	latin small letter u with acute
Û	&Ucirc;	\00DB	latin capital letter U with circumflex
û	&ucirc;	\00FB	latin small letter u with circumflex
Ù	&Ugrave;	\00D9	latin capital letter U with grave
ù	&ugrave;	\00F9	latin small letter u with grave
Ü	&Uuml;	\00DC	latin capital letter U with diaeresis
ü	&uuml;	\00FC	latin small letter u with diaeresis
Ý	&Yacute;	\00DD	latin capital letter Y with acute
ý	&yacute;	\00FD	latin small letter y with acute
Ÿ	&Yuml;	\0178	latin capital letter Y with diaeresis
ÿ	&yuml;	\00FF	latin small letter y with diaeresis

Раньше вырезать объекты с эффектами слоя, выступающими за его границы — тень (Drop Shadow), свечение (Outer Glow) или контур (Stroke), — было долго и неудобно. Инструмент Slice прилипает к границам самого слоя, а не к границам эффектов. Приходилось лезть в настройки эффекта и смотреть, на сколько пикселей распространяется свечение, или пипеткой искать место, где заканчивается тень. А потом устанавливать гайды, чтобы нарезать всё аккуратно. Жутко неудобно.

New Layer Based Slice захватывает и границы эффектов тоже. То, на что раньше требовалось до нескольких минут, можно сделать двумя нажатиями клавиш.

Для ускорения процесса нарезки на это действие можно повесить своё сочетание горячих клавиш, но лучше привыкнуть к двум стандартными сочетаниями: (Alt+L)+(Alt+B).

В трекере описан этот баг, но пока решения нет.

Автозаполнение можно выключить с помощью autocomplete="off":

<form action="…" method="post" autocomplete="off">

Обновлено 30 октября 2012.

Поля c автокомплитом можно перекрасить при помощи трюка с box-shadow:

input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 50px white; /* цвет вашего фона */
    -webkit-text-fill-color: black; /* цвет текста */
}

Если вы для :focus состояния задавали стили с использованием box-shadow, то вам придется заново их переопределить:

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 5px 0    blue,   /* ваш box-shadow для :focus */
                  inset 0 0 0   50px white;  /* цвет вашего фона */
    -webkit-text-fill-color: black;          /* цвет текста */
}

При помощи нескольких теней можно имитировать градиент.