CSS-live.ru

Cтатьи по тегу «каскад»

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

6

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

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

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

16

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

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

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

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

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

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

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

Новые кандидаты в рекомендации W3C: CSS Display и CSS Cascading 3 и 4

0

28 августа модуль CSS Display 3 уровня, за развитием которого мы наблюдаем с его появления, следя за его новинками и хорошо забытыми старыми секретами, стал кандидатом в рекомендации. То есть спецификация считается полностью теоретически проработанной и готовой к реализации. Отличий от предыдущего черновика совсем немного: уточнено, что для «особых» элементов, для которых display:contents работает как none, оно будет и вычисляться как none, а также уточнено определение контекста форматирования и оговорено, что display не анимируется (даже дискретно).

Почему избегать CSS-каскада — это проблема?

0

Перевод статьи Why is not using the CSS cascade a problem? с сайта www.quirksmode.org для css-live.ru, автор — Питер Пол Кох

Когда я объявил, что собираюсь написать кое-что для JavaScript-разработчиков, не понимающих CSS, многие (включая Джереми) говорили, что крайне необходимой будет глава о каскаде и наследовании, поскольку слишком многие JS-разработчики, кажется, их не понимают.

Сначала я было согласился, но потом во мне завелись сомнения, из-за которых я и пишу эту заметку.