CSS-live.ru

SelenIT: статьи и переводы

Стандарт CSS для Masonry-раскладки: от идеи — к первым конкретным наработкам

2
Предложение стандарта Masonry-раскладки

Одним из самых больших разочарований CSS-гридов с самого их появления была невозможность решить задачу плотной упаковки блоков, известную как «Masonry-раскладка» (в честь самой популярной JS-библиотеки для нее). Алгоритм авторазмещения с ключевым словом dense почти решает ее, но… лишь почти, к тому же упирается в досадное браузерное ограничение в 1000 грид-полос. Веб-разработчики давно просили добавить такую возможность в стандарт, но, как часто бывает в CSS, всё портила циклическая зависимость: размеры элементов зависят от размеров контейнера, которые, в свою очередь, зависят от размеров элементов. Поэтому дальше обсуждения на гитхабе дело не шло.

Но на этой неделе Мэтс Палмгрен из Mozilla внес новое, конкретное и подробное предложение, как относительно просто добавить в грид-раскладку возможности Masonry. Фактически это готовый черновик раздела спецификации, даже о тестах Мэтс не забыл. Табу Аткинсу, одному из главных редакторов спецификации, идея тоже нравится. При такой тщательности проработки есть все шансы, что новое предложение успеет войти уже в ближайший CSS Grid Level 2. Так что подключайтесь к обсуждению, чтобы не отставать от прогресса и помочь отладить новое предложение на самой ранней стадии!

Новый экспериментальный облик CSS-live.ru

24

Проводы старого года – неплохой повод для обновления и смелых экспериментов. Если вы не впервые на CSS-live.ru, вы наверняка заметили, что у нас немножко поменялось оформление, и – надеюсь – что сайт стал чуть быстрее грузиться. Новая верстка – во многом эксперимент: в ней совсем нет оформительской графики, всё оформление сделано на CSS. Причем прямо в браузере, в live-режиме, т.е. вживую:)

Если хотите узнать, что толкнуло нас на этот эксперимент, как он помог нам добиться 100% в аудите Google Lighthouse по скорости, доступности, лучшим практикам и SEO, какие трудности преодолевали по пути и какие новые приемы использовали – добро пожаловать в эту статью!

CSS-модуль режимов письма (Writing Modes) 3 уровня официально стал стандартом W3C

0
Скриншот пресс-релиза W3C со слоганом «Делаем Всемирную паутину всемирной», набранным вертикальным письмом

На прошлой неделе спецификация режимов письма (CSS Writing Modes Level 3) получила статус рекомендации, т.е. стандарта W3C. В связи с этим W3C выпустил целый специальный пресс-релиз, отмечающий эту публикацию как важную веху в многолетней работе над представлением текста в интернете и поддержкой разных языков. Далеко не каждый новый стандарт удостаивается такого внимания.

На странице пресс-релиза бросается в глаза слоган «Сделаем Всемирную паутину всемирной!» на четырех языках (английском, китайском, японском и корейском) и отзывы членов W3C на этих же языках, набранные вертикально. Это наглядная демонстрация всего одной из массы возможностей нового стандарта. Аудитория интернета становится всё шире и разнообразнее, и задумываться о поддержке разнонаправленного письма приходится всё чаще. В новых CSS-механизмах типа свойств для выравнивания всего это заложено с самого начала, а вот сам текст до недавнего времени отставал.

Кстати, разнонаправленный текст бывает полезен не только для экзотических (для нас) языков, но и как художественный прием. Мы уже встречали его в экспериментах Джен Симмонс и Чэнь Хуэй Цзин, а с приходом нового стандарта в браузеры он вполне может стать одним из важных трендов в веб-дизайне в наступающем 2020-м. Так что следите за новинками CSS вместе с нами, чтобы не отставать от них! :)

CSS4 не будет… потому что он давно прошел. Встречайте CSS8!

2

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

Внимательные читатели нашего сайта уже знают, что с 2007 года существует периодически обновляемый документ под названием «CSS Snapshot» (т.е. «снимок» состояния CSS), c лаконичным адресом https://w3.org/TR/css. Один из его разделов называется (ни много ни мало) «Официальным определением CSS». Чем не ориентир?

Маленькие хитрости кастомных свойств (CSS-переменных)

1

Поводом для этой заметки стал недавний твит нашего давнего знакомого Зака Лезермана, лучшего в мире знатока веб-шрифтов:

Сегодня у меня возникла потребность в условных операциях с кастомными свойствами CSS.

flex-basis: (—my-variable ? 0 : 4px)

Я не смог сделать это с фолбэками в var(). Это возможно или обсуждается где-нибудь среди стандартистов? (CSS-in-JS — ответ не на тот вопрос)

Другими словами, нужно выбирать ту или иную величину в зависимости от наличия переменной, независимо от ее значения.

И я решил поделиться несколькими находками, связанными с неочевидными (по крайней мере для меня:) особенностями CSS-переменных. Можно считать это еще одним уроком CSSbattle – именно там я на них впервые наткнулся. Возможно, и вам они где-нибудь пригодятся:)

Фантастические веб-спецификации и где они обитают

8

Многие разработчики, что уж скрывать, недолюбливают спецификации. Одни считают их скучными. Другим они вообще кажутся монстрами, не иначе как порожденными мифической Ехидной (невероятно, но это отчасти правда: именно так — Echidna — называется система автопубликации, используемая в W3C). Новичка они могут запутать, как лешие, заманить в ловушку, как сирены, и озадачить неразрешимыми загадками, как Сфинкс. Зато о тех, кто проник в их тайны и подчинил себе их мощь, порой слагают легенды фронтенда.

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

W3C и WHATWG: неужели долгожданный мир?

1
логотипы W3C и WHATWG

Сегодня на сайте W3C появилась знаменательная новость: W3C и WHATWG подписали общий меморандум о совместной работе над едиными спецификациями HTML и DOM. То есть многолетний раскол, результатом которого были две разные версии главного стандарта веба и постоянная путаница между ними, должен вот-вот закончиться!

Селектор :has() станет доступен для оформления?

0

Родительский селектор, т.е. возможность стилизовать элементы в зависимости от их содержимого — давняя, но пока несбыточная мечта многих верстальщиков. Предложения такого селектора, в том или ином виде, бродят по черновикам W3C с начала двухтысячных. Но он получается очень ресурсоемким и медленным. Поэтому в черновике модуля CSS-селекторов 4 уровня изначально селекторы делились по «профилям»: «живой», отражающий состояние интерфейса в реальном времени и используемый для оформления, и «мгновенный снимок» (ранее «статичный»), для одного конкретного момента и доступный только в JS-методах типа querySelector(). До последнего времени селектор :has() был единственным исключением из «живого» профиля. Что значило, что даже когда (и если) браузеры его реализуют, использовать его для оформления будет нельзя.

Уроки CSSbattle

5

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

Правильная шпаргалка по CSS-каскаду

6

Написать эту статью меня подтолкнула относительно недавняя статья на CSS-tricks (скорее всего, вы ее уже видели, ссылку не дам из вредности:). Ее автор проделал большую и замечательную работу — нарисовал красивую наглядную схему-«шпаргалку», написал объяснение простым языком, привел кучу примеров, не забыл даже про презентационные атрибуты, тоже влияющие на стили (в SVG)… Увы, даже та статья подтвердила два печальных правила: 1) никто не знает CSS, 2) никто не читает спецификаций. Так что первая ее редакция транслировала одно из популярных заблуждений о каскаде. К чести автора, он оперативно исправил и схему, и статью — но если бы он заглянул в стандарт, этого могло бы и не понадобиться…

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

Свойство appearance и стандартизация стилей элементов форм: новая надежда

0
анонс заготовки спецификации на Гитхабе

Оформление элементов форм — пожалуй, главный источник боли в современной верстке. Каждое поле ввода, каждая кнопка — «вещь в себе», причем в каждом браузере реализованная чуть по-своему. И управлять их стилями тоже часто приходится в каждом браузере по-своему. А некоторые задачи (например, отобразить кнопку как обычный элемент с display: inline, с переносом на новую строку, если надо) и вовсе никак не решаются (внешне такой эффект дает display: contents, но в теперешних реализациях это ломает доступность, так что это не решение). Много надежд на избавление от этой боли возлагалось на свойство appearance, но судьба этого свойства оказалась сложной и запутанной. Сейчас в браузерах есть лишь старые его реализации с префиксами, тоже везде свои, и ни одна из них не решает задачу полностью.

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

Работа предстоит громадная, но темп взят неплохой. За считанные дни заготовка документа на Google Docs выросла до внушительных 19 страниц. Учитывая опыт Саймона в работе над спецификациями WHATWG, где как раз много приходилось «приводить к общему знаменателю» разнобраузерные зоопарки реализаций, есть надежда, что в этот раз всё получится!

Почему мы не добавим в HTML элемент <чудесный>?

7

Перевод статьи Why don’t we add a <lovely> element to HTML? с сайта www.brucelawson.co.uk, опубликовано на css-live.ru с разрешения автора — Брюса Лоусона

Вчера был интересный разговор, который начала Сара Суайдан:

твит Сары Суайдан (@SaraSoueidan), 8 октября 2018 г. в 16:36:

Вот что я хотела бы увидеть в HTML:
<color value=“” />
Просто. Чрезвычайно полезно, особ. для дизайн-систем сегодня.

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

На правах Древнего Старожила Веба, я сел и пораздумывал над этим.

картина Рембрандта «Размышляющий философ»

«Спор из-за пустого места» и изменение в селекторах 4 уровня

1
Новое определение :empty

Несколько часов назад в спецификацию CSS-селекторов 4 уровня внесли малозаметное, но существенное изменение. По-новому определили полезный псевдокласс :empty: если раньше — в селекторах 3 уровня, что были стандартом с 2011 г. — он соответствовал только совсем пустым элементам, не содержащим даже пробелов и HTML-комментариев, то теперь элементы с одними пробельными символами и HTML-комментариями внутри будут тоже считаться пустыми. А псевдокласс :blank, который раньше предлагался именно для таких элементов, теперь будет соответствовать элементам форм с пустым value.

Хотя новое поведение :empty выглядит логичным (пробелы в HTML часто служат лишь для форматирования кода и не воспринимаются как контент), оно нарушает обратную совместимость, поэтому не все ему рады. В ишью на гитхабе рабочей группы CSS, хотя его и закрыли как решенное, обсуждение продолжается. Так что, если у вас есть возражения и примеры, где новое поведение :empty будет «не в тему», смело подключайтесь и аргументируйте — редакторы спецификации готовы пересмотреть своё решение, если надо, и будущее CSS в ваших руках!

Первый (и странный) публичный черновик CSS-модуля скроллбаров

3

25 сентября Рабочая группа CSS в W3C выпустила первый публичный черновик модуля скроллбаров (CSS Scrollbars) 1 уровня. По замыслу, он должен предоставить стандартные средства для того, чтобы можно было органично вписывать скроллбары в разные темы оформления (темные, контрастные, компактные и т.д.), не ломая при этом «родной» функциональности платформы. Но выбор средств, которые предлагает этот черновик, многих может удивить.

Никто не знает CSS: специфичность — не каскад

12

Пролог (в котором едва обошлось без драки)

Прошедшие выходные ознаменовались небольшой драмой в веб-сообществе. Началась она с безобидного «теста» по CSS в твиттере Макса Штойбера, разработчика styled-components и react-boilerplate:

Насколько хорошо вы знаете CSS? (эмодзи: ученик у доски)

При таких классах:

.red { color: red; }
.blue { color: blue; }

какого цвета будут эти дивы?

<div class="red blue">
<div class="blue red">