Author: SelenIT

07
Май
2020

Приключения Masonry-раскладки в CSS

«Masonry-раскладка», она же «плиточная верстка», она же «раскладка кирпичиками», она же «Cascading Grid», она же — вернее, один из ее вариантов — «верстка как у Pinterest», она же… в общем, задача верстки такого типа макетов известна верстальщикам очень давно, под многими именами. Раньше на чистом CSS она до конца не решалась. Можно было добиться внешне похожего результата для частных случаев, но какой-то нюанс ускользал. На практике приходилось использовать JS-библиотеки — прежде всего […]

20
Мар
2020

«Не закрывайте теги!»

С таким провокационным призывом на днях обратился к своим читателям в Твиттере не кто-нибудь, а Таб Аткинс, главный редактор львиной доли спецификаций CSS. Конечно, речь шла не о любых тегах, а об опциональных (необязательных), которые разрешает не ставить сам стандарт HTML. Но всё равно призыв Таба многих шокировал, очень уж вразрез он шел со всем, чему нас учили с самого начала веб-карьеры. Может, Таб просто всех троллил? Или же в его совете есть […]

17
Мар
2020

Когда 255 × 0 не равно нулю

Перевод статьи When 255 × 0 does not Equal Zero с сайта danielcwilson.com для css-live.ru, автор — Дэниел Уилсон Прежде всего, важная оговорка: я не эксперт в работе с цветами и в цветовых профилях мониторов. И я понимаю лишь самые очевидные различия между дефолтным цветовым пространством для веба — sRGB — и другими более новыми моделями. Мы обсудим оба случая, я объясню то, что знаю сам, и оставлю другим возможность (и ссылки) подключиться к разговору […]

03
Мар
2020

6 первых публичных черновиков новых модулей CSS, которыми вы, возможно, давно пользуетесь

При всей парадоксальности заголовка, будто взятого из фантастики про «временные петли», это правда. Три недели назад рабочая группа по CSS опубликовала первые публичные рабочие черновики двух модулей CSS. Сегодня к ним добавились еще аж 4 первых публичных черновика (включая два модуля 5 уровня). И многие новинки роднит то, что часть их функций давно работает почти […]

01
Мар
2020

CSS против коронавируса: доступное представление иерархических табличных данных

О новом опасном вирусе, наверное, уже наслышаны все. Многие из нас с тревогой следят за официальной статистикой через гуглоперевод. И я подумал, что эта ситуация — неплохой пример, как важна бывает доступность веб-контента обычным людям. Ведь от информации может зависеть здоровье, а то и жизнь, а обстоятельства, в которых мы её ищем, бывают самые разные. Скажем, у вас срочная командировка в одну из охваченных эпидемией стран, и вы строите маршрут в объезд главных очагов. А у гостиничного компьютера […]

24
Фев
2020

В W3C появилась общественная группа по CSS4

Когда-то у CSS была мечта. Светлое будущее, прекрасное далёко, в котором хотелось очутиться побыстрее, о котором слагали песни. У него было краткое и запоминающееся имя – «CSS3». Как всякое будущее, оно было туманным: отдельного стандарта с таким названием никогда не было. Но именно с ним ассоциировалось всё новое и крутое, с чем уже можно было […]

16
Фев
2020

На пути к отзывчивым элементам

Перевод статьи Towards Responsive Elements с сайта bkardell.com, опубликован на CSS-live.ru с разрешения автора — Брайана Карделла В этой статье я расскажу о проблеме «выражений от контейнера», попытаюсь пролить свет на некоторые заблуждения, и ввести вас в курс состояния дел. Наблюдение за стандартами может вогнать разработчика в ступор. Мы можем узнавать о разработке новых спецификаций, появлении новых функций, о которых мы и понятия не имели — возможно, каких-то для нас совсем неважных. При этом «Выражения […]

06
Фев
2020

CSS-2020: очередной «снимок состояния» или спецификация №1 современного CSS?

Рабочая группа по CSS начала работу над новым «снимком» состояния CSS (CSS Snapshot). Прошлый 2019-й год прошел без своего «снимка» (только в январе вышла последняя редакция CSS-2018), так что давно пора! Редакторский черновик CSS-2020 уже создан. Пока отличий от CSS-2018 немного: модуль CSS-изоляции 1 уровня (CSS Contain 1), достигший за это время финального статуса рекомендации, перешел из […]

27
Янв
2020

Новые математические функции в модуле единиц и значений CSS 4 уровня – еще один шаг к полноценному программированию на CSS

Предпоследняя неделя января выдалась плодотворной для Рабочей группы по CSS. Целых три дня редакторы CSS-стандартов собирались в офисе Igalia (тех ребят из Испании, которым мы обязаны одновременным внедрением CSS-гридов в половину браузерных движков). В числе прочего обсуждались новые возможности математических вычислений в CSS, о которых давно мечтали верстальщики. Итог этого обсуждения Таб Аткинс подвел в […]

09
Янв
2020

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

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

22
Дек
2019

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

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

18
Дек
2019

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

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

15
Ноя
2019

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

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

25
Окт
2019

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

Поводом для этой заметки стал недавний твит нашего давнего знакомого Зака Лезермана, лучшего в мире знатока веб-шрифтов: Сегодня у меня возникла потребность в условных операциях с кастомными свойствами CSS. flex-basis: (—my-variable ? 0 : 4px) Я не смог сделать это…
ДАЛЕЕ

06
Авг
2019

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

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

28
Май
2019

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

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

17
Май
2019

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

Родительский селектор, т.е. возможность стилизовать элементы в зависимости от их содержимого — давняя, но пока несбыточная мечта многих верстальщиков. Предложения такого селектора, в том или ином виде, бродят по черновикам W3C с начала двухтысячных. Но он получается очень ресурсоемким и…
ДАЛЕЕ

23
Апр
2019

Уроки CSSbattle

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

26
Ноя
2018

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

Написать эту статью меня подтолкнула относительно недавняя статья на CSS-tricks (скорее всего, вы ее уже видели, ссылку не дам из вредности:). Ее автор проделал большую и замечательную работу — нарисовал красивую наглядную схему-«шпаргалку», написал объяснение простым языком, привел кучу примеров, не…
ДАЛЕЕ

17
Окт
2018

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

Оформление элементов форм — пожалуй, главный источник боли в современной верстке. Каждое поле ввода, каждая кнопка — «вещь в себе», причем в каждом браузере реализованная чуть по-своему. И управлять их стилями тоже часто приходится в каждом браузере по-своему. А некоторые…
ДАЛЕЕ

11
Окт
2018

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

Перевод статьи Why don’t we add a <lovely> element to HTML? с сайта www.brucelawson.co.uk, опубликовано на css-live.ru с разрешения автора — Брюса Лоусона Вчера был интересный разговор, который начала Сара Суайдан: твит Сары Суайдан (@SaraSoueidan), 8 октября 2018 г. в 16:36: Вот…
ДАЛЕЕ

04
Окт
2018

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

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

28
Сен
2018

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

25 сентября Рабочая группа CSS в W3C выпустила первый публичный черновик модуля скроллбаров (CSS Scrollbars) 1 уровня. По замыслу, он должен предоставить стандартные средства для того, чтобы можно было органично вписывать скроллбары в разные темы оформления (темные, контрастные, компактные и…
ДАЛЕЕ

13
Сен
2018

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

Пролог (в котором едва обошлось без драки) Прошедшие выходные ознаменовались небольшой драмой в веб-сообществе. Началась она с безобидного «теста» по CSS в твиттере Макса Штойбера, разработчика styled-components и react-boilerplate: Насколько хорошо вы знаете CSS? (эмодзи: ученик у доски) При таких…
ДАЛЕЕ

17
Авг
2018

Стандарт для нестандартного

Стандарты, увы,  не всегда поспевают за нашими потребностями. Иногда соблазн быстро решить задачу одной-двумя нестандартными строчками бывает слишком велик. Особенно если по этой строчке не видно, что она нестандартная. Когда-то давно, в эпоху префиксов, некоторые браузеры любили выпускать свою отсебятину…
ДАЛЕЕ

03
Авг
2018

Как мы делали веб-интерфейс для Google Photos: заглядываем под капот

Перевод статьи Building the Google Photos Web UI с сайта medium.com для CSS-live.ru, автор — Антин Харасимив Несколько лет назад мне посчастливилось стать инженером в команде Google Photos и поучаствовать в их первом запуске в 2015-м. Множество людей вложило силы в…
ДАЛЕЕ

24
Июл
2018

Удивительный и неизвестный inline-block

Эта статья задумана как начало цикла про загадки, сюрпризы, малоизученные особенности и маленькие полезные секреты самого могущественного, пожалуй, свойства в CSS — свойства display. У нас уже были статьи про новинки этого свойства — значения contents (что это вообще, его…
ДАЛЕЕ

15
Июл
2018

Химия CSS-гридов

На StackOverflow один участник задал вопрос, как сверстать на CSS Grid периодическую таблицу Менделеева. Примеров периодических таблиц на гридах в Сети навалом, есть и очень симпатичные. Но чаще всего они стремятся воспроизвести лишь внешний вид таблицы, порой вручную расставляя элементы…
ДАЛЕЕ

10
Июл
2018

Компоненты и разделение ответственности

Перевод статьи Components and concerns c сайта adactio.com, опубликовано на css-live.ru с разрешения автора — Джереми Кита Порой мы слишком увлекаемся ложными противопоставлениями в мире веб-дизайна и веб-разработки. Недавно я подметил одно, регулярно всплывающее в области дизайн-систем и компонентов. Это…
ДАЛЕЕ

22
Май
2018

eqio — простая, компактная альтернатива выражениям от элемента/контейнера

Перевод статьи eqio — A simple, tiny alternative to element/container queries с сайта medium.com для css-live.ru, автор — Мэтт Стоу Классические принципы отзывчивого дизайна больше не отвечают нашим, разработчиков дизайн-систем и библиотек компонентов для веба, потребностям. Если уж с этим согласен Итан…
ДАЛЕЕ