CSS-live.ru

Теория

Неизведанные глубины CSS: метрики шрифта, line-height и vertical-align

30

Перевод статьи Deep dive CSS: font metrics, line-height and vertical-align с сайта iamvdo.me, опубликовано на css-live.ru с разрешения автора — Венсана де Оливейры.

Line-height и vertical-align — простые CSS-свойства. Настолько простые, что большинство из нас уверены, что понимают, как они работают и как ими пользоваться. Но это не так. На деле они сложны, может быть, сложнее всех, потому что у них ведущая роль в создании одной из самых малоизвестных особенностей CSS: строчного (инлайнового) контекста форматирования.

Например, line-height можно задать в виде длины или безразмерного значения 1, но по умолчанию у него значение normal — «нормально». Прекрасно, но что значит «нормально»? Часто пишут, что это (по крайней мере, должно быть) 1, или где-то 1.2, даже CSS-спецификация не дает точного ответа. Мы знаем, что безразмерное  line-height считается относительно font-size, но загвоздка в том, что font-size: 100px ведет себя по-разному для разных гарнитур, так будет ли line-height всегда одинаковым или разным? Действительно ли оно от 1 до 1.2? А vertical-align, как line-height влияет на него?

Давайте углубимся в не самый простой CSS-механизм…

Нужен ли нам новый заголовочный элемент? Мы не знаем

5

Перевод статьи Do we need a new heading element? We don’t know с сайта jakearchibald.com, опубликовано на css-live.ru с разрешения автора — Джейка Арчибальда.

В спецификацию HTML предлагают добавить новый элемент <h>. Это решает довольно частую задачу. Возьмем такой пример HTML:

Варианты «clearfix-хака» и его замен: сводная таблица

5

Вдогонку статье о новом значении свойства display, призванном избавить верстальщиков от нужды в clearfix-хаках — своего рода «шпаргалка», показывающая, в чем именно бывают проблемы с float-ами и какие из решений — исторических, теперешних и перспективных — какие из этих проблем решают (а какие — создают взамен:).

Еще раз про border-image

12

Хотя свойство border-image уже поддерживают более 96% браузеров (с оговорками, но всё же), популярным пока его не назовешь. Пожалуй, поначалу оно кажется неоправданно сложным: объединяет в себе 5 отдельных свойств, каждое с несколькими значениями, да еще неочевидные правила взаимодействия с обычным border — легко запутаться. Даже многие неплохие руководства (типа статьи Дадли Стори, которую мы переводили в прошлом году) грешат тем, что даже после них ощущение сложности не проходит.

Есть мнение, что его сложность преувеличена, а возможности недооценены. Попробуем исправить это упущение.

Псевдоэлементы, которых не может быть

13

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

Регрессивные веб-приложения

2

Перевод статьи Regressive Web Apps с сайта adactio.com, опубликовано на css-live.ru с разрешения автора — Джереми Кита.

На конференции Google I/O в этом году было немало докладов о разработке для веба. Приятная перемена по сравнению с прошлыми годами, когда о вебе едва вспоминали и можно было скорей подумать, что  Google I/O — конференция для разработчиков приложений под Андроид.

Последняя конференция показала, что Гугл очень большой и у него нет какой-то единой генеральной линии по поводу веба и нативных приложений. Хотя были доклады о сервис-воркерах и производительности для веба, были также представлены «Мгновенные Андроид-приложения» — неприкрытая атака на веб. Если вас раздражало, что сайты назойливо тыкали вам под нос всплывающие окошки с предложением установить их приложения, то подождите, скоро они смогут и не спрашивать.

О моратории на новые браузерные функции, предложенном PPK

2

Перевод статьи On PPK’s moratorium on new browser features с сайта https://dev.opera.com/, с разрешения автора — Брюса Лоусона

Знаменитый разработчик и автор множества статей Питер Пол Кох (PPK) недавно призвал к «мораторию на новые браузерные функции на год или около того». Если вы не читали его статью «Хватит толкать веб вперед», просмотрите ее: он выдвигает интересные тезисы, как всегда.

Как стать выдающимся фронтенд-разработчиком

9

Перевод статьи How to Become a Great Front-End Engineer с сайта philipwalton.com, c разрешения автора— Филипа Уолтона.

Недавно я получил электронное письмо от читателя моего блога, которое почему-то заставило меня всерьез задуматься. Вот что оно гласило:

Привет, Филип, можно спросить, как вы стали выдающимся фронтенд-разработчиком?

Что-нибудь посоветуете?

Если мы остановимся, мы двинемся вспять

3

Перевод статьи If we stand still, we go backwards с сайта jakearchibald.com, c разрешения автора — Джейка Арчибальда.

Недавно PPK заявил, что веб движется слишком быстро в неправильном направлении, и попросил однолетнего моратория на веб-фичи. Я настолько разозлился, что тут же бросился к словарю, чтобы уточнить значение слова «мораторий». Оказалось, что оно значит «приостановка».

Я немного вспылил в твиттере, что было не совсем правильно, так что вот более взвешенный ответ:

Хватит толкать веб вперед

7

Перевод статьи Stop pushing the web forward с сайта www.quirksmode.org, c разрешения автора — Питера Пола Коха.

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

С недавних пор я в глубоких сомнениях по поводу всего этого подталкивания веба вперед. Зачем толкать его вперед? И вперед к чему именно? Нужен ли нам такой веб, к чему мы его толкаем? Вам не доводилось слышать эти вопросы.

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

Ну-ка, назовите сходу все новые функции, выпущенные браузерами в 2015! Видите? Не можете. В этом-то и проблема.

Мы получаем всё больше функций, которые становятся всё сложнее и требуют для работы всё больше полифилов и др. инструментов — инструментов, являющихся частью проблемы, а не ее решения.

Я не думаю, что это то, к чему надо толкать веб вперед. Нативные приложения всегда будут намного лучше в нативных задачах, чем браузер. Вместо этого нам надо бы сосредоточиться на сильных сторонах веба: простоте, URLах и доступности.

Машина инноваций на всех парах мчит не туда. Нам нужен перерыв. Нам нужна возможность «с чувством, с толком» разобраться с теми функциями, что у нас уже есть — без инструментов! Кроме того, нам нужно время для основательного обсуждения, куда мы хотим толкать веб вперед. Годовой мораторий на новинки дал бы нам это время.

О «призраках» в CSS и борьбе с ними: анонимные боксы

2

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

Стандарт HTML5

Для спецификаций CSS этот совет актуален вдвойне: при каждом прочтении открывается очередная тайна. Как-то раз, расследуя детективную историю о пропавшем контексте форматирования, мы ненароком «открыли периодический закон» для свойства display. В этот раз мы столкнемся с мистикой.

…Они появляются из ниоткуда. Они бестелесны. Их не может поймать даже DOM-инспектор. Они своенравны: иногда они незримо приходят на помощь, но могут и довести до слез своими проказами. У них нет имени. Лишь немногие владеют тайной, позволяющей повелевать ими…

Сегодня вы тоже узнаете эту тайну. Но сначала давайте вызовем парочку их.