Интересные новинки в CSS — 1

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

У всех этих свойств пока что довольно слабая поддержка, так что не стоит использовать их в боевых проектах. Но когда-нибудь светлое будущее наступит.

hanging-punctuation

По-русски это называется висячей пунктуацей.

Спецификация: https://drafts.csswg.org/css-text-3/#hanging-punctuation-property

Сейчас поддерживается только в Сафари, начиная с 10 версии. Можно использовать через @supports, если не используете типограф или что-то подобное. Надеюсь остальные браузеры тоже подхватят.

See the Pen mWJJNx by Joel Drapper (@joeldrapper) on CodePen.


display: flow-root

Если по простому, то это замена clearfix. С этим свойством он больше не нужен. Но там все сложнее и интереснее. Почитайте статью на CSS-live, они полностью раскрыли тему: http://css-live.ru/faq/displayflow-root-not-clearfix.html

Спецификация: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root

Работает только в Фаерфоксе 53+ и Хроме 57+.


initial-letter

Определяет какой высоты будет первая буква, но примечательно то, что размер указывается не в px (em, rm, etc.), а в количестве строк обычного текста. Работает только для псевдо-элемента ::first-letter. Удобно делать буквицы на CSS.

Спецификация: https://www.w3.org/TR/css-inline/#initial-letter-styling

Сейчас нет адекватной поддержки в браузерах. Только в последней версии Сафари (TP).

Пример со страницы спецификации


scroll-behavior

Плавная прокрутка до определенного элемента. Сейчас если кликнуть по якорю, то прокрутка будет моментальной, чтобы было плавно используют JS. С этим свойством JS не нужен. Посмотрите примеры на CSS Tricks: https://css-tricks.com/almanac/properties/s/scroll-behavior/

Спецификация: https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior

Работает только в Фаерфоксе.


:placeholder-shown

Отрабатывается, когда виден текст плейсхолдера.

Спецификация: https://www.w3.org/TR/selectors4/#placeholder

Не работает в ИЕ и Эдже.


Поддержка фич OpenType

Браузеры начали хорошо поддерживать Open Type и появились всякие свойства, связанные с этим. Настолько все тонко, что кодер вряд ли придумает зачем это все нужно. Верстать должен дизайнер ;-)

  • font-kerning — включение или отключение кернинга
  • font-variant-ligatures — управление лигатурами
  • font-variant-position — включение подстрочных или надстрочных символов
  • font-variant-alternates — управление глифами
  • font-variant-caps — управление капителью
  • font-variant-numeric — управление цифрами
  • font-variant-alternates — управление глифами
  • @font-feature-value — настройка шрифта и глифов
  • font-variant-east-asian — работа с лигатурами в текстах с иероглифами
  • font-feature-settings — настройка шрифта
  • font-language-override — смена основного языка при выборе глифов

Я сам до конца не разобрался во всем этом, но очень круто. Стоит понимать, что не все шрифты поддерживают такой функционал так что на каком-нибудь Open Sans тестировать это не стоит. Ищите шрифты с «Pro» в названии, большая вероятность что поддержка всего этого в таком шрифте будет.

Спецификация: https://www.w3.org/TR/css-fonts-3/#font-rend-props

Разные свойства по разному поддерживаются в разных браузерах.


Медиа-выражения: Interaction Media Features

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

Спецификация: https://www.w3.org/TR/mediaqueries-4/#mf-interaction

Фаерфокс пока что не поддерживает


CSS Scroll snap points

Точечное управление скроллом. Можно создавать так называемые точки прилипания и при скорлле привязываться к ним. Сейчас такое делают на JS. Боюсь, что со временем этим будут злоупотреблять, но радует, что нужно меньше JS в некоторых случаях.

Спецификация: https://www.w3.org/TR/css-scroll-snap-1/

Хром никак не поддерживает, остальные не без проблем.


CSS-переменные

Об этом я давно что-то слышал, но сейчас посмотрел. Уже неплохая поддержка. Использовать в боевых проектах я бы пока не стал, но уже через годик можно будет, я думаю. Вряд ли они понадобятся ребятам, которые используют Stylus (LESS, SCSS, ...). Но, тем не менее, это очень важное нововведение.

Спецификация: https://drafts.csswg.org/css-variables/


Есть еще много крутого, но я решил не писать обо всем сразу потому что слишком много за раз — плохо.

Поделиться
Отправить
Запинить
Комментарии отключены
Пишите на эл. почту me@shugich.net и подписывайтесь на канал в Телеграме
Популярное