Оглавление
В этом посте представлена техника, называемая каскадированием CSS , для оптимизации процесса сброса CSS. В нем объясняется концепция сброса CSS , который обеспечивает единообразие отображения в браузерах за счет удаления стилей браузера по умолчанию. Затем он представляет технику каскадирования CSS для большего контроля над иерархией стилей и приоритетом.
В статье подробно рассматриваются использование и преимущества технологии каскадирования CSS. Он знакомит с несколькими ключевыми понятиями, включая порядок наложения, позиционирование по оси Z и контекст наложения . Он также содержит практические примеры и фрагменты кода, чтобы помочь читателям понять, как использовать CSS Cascading для лучшего контроля и управления стилями.
В статье также упоминаются некоторые проблемы и соображения, с которыми вы можете столкнуться при использовании методов каскадирования CSS. Он рекомендует осторожно обращаться с порядком каскадирования и приоритетом при использовании каскадирования CSS, чтобы избежать конфликтов стилей и непоследовательного рендеринга.
Ниже текст~~
Я всегда был тем, кто склонялся к более агрессивному подходу к сбросу CSS. Эти методы очищают большинство стилей по умолчанию в браузере, например, он удаляет стили заголовков по умолчанию из элементов <h1>в<h6> , которые обычно имеют больший размер и вес шрифта.
Однако мне также нравится , как Normalize CSS обрабатывает теневые элементы DOM , чего нет ни в одном из методов сброса CSS .
Однако мне также нравится , как Normalize CSS обрабатывает теневые элементы DOM, чего нет ни в одном из методов сброса CSS. Так что я всегда ищу способы объединить эти два. Несмотря на это, я столкнулся с некоторыми проблемами с приоритетом CSS, и мне нужно найти обходной путь.
Перенесемся в сегодняшний день: все браузеры теперь поддерживают слои CSS. Поэтому при разработке дизайн-системы Appwrite с открытым исходным кодом, Pink Design, мы решили переосмыслить, как лучше справиться с этой проблемой.
Прежде чем мы начнем, давайте немного поговорим о методах сброса CSS.
Метод сброса CSS
В течение многих лет ведутся «дебаты» о том, какой метод сброса CSS лучше.
Для этого конкурса мы использовали два знакомых подхода:
-
**Нормализовать CSS** — мягкий способ исправить различия между браузерами, сохранив при этом собственный стиль HTML-элементов, таких как элементы
<h1>заголовков<h2>.
Как упоминалось ранее , Normalize CSS также отвечает за обработку элементов Shadow DOM, которые могут отображаться по-разному в разных браузерах.
Демонстрация обработки элементов Shadow DOM в Normalize CSS :
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
-
Сброс CSS . Сброс CSS — это более агрессивный подход, часто переопределяющий стиль браузера по умолчанию «таблица стилей пользовательского агента».
Демонстрация сброса CSS:
Этот код отменяет <h1> специальные font-size , font-weight и margin , преобразуя их в элемент: <h6>
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
сочетание методов
Комбинируя методы Normalize CSS и CSS Reset , вы можете извлечь выгоду из обоих методов.
Это гарантирует, что внутренние теневые элементы DOM обрабатываются, а бесполезные стили, унаследованные от «таблиц стилей агента пользователя», игнорируются. Самый простой способ добиться этого — загрузить оба одновременно. Вот демонстрация того, как это реализовано в препроцессоре Sass:
/* CSS Resets */
@use 'normalize';
@use 'reset';
Вы можете подумать, что если мы сначала загрузим Normalize CSS, а затем CSS Reset , это сделает наш CSS Reset более конкретным, верно? Не совсем так, давайте немного поговорим об этом.
Проблема с методом слияния
В Appwrite Pink мы используем Normalize CSS , который также используется в сочетании с «новым методом сброса CSS». «Новый метод сброса CSS» — это новый способ сброса CSS, использующий преимущества новых встроенных функций сброса CSS.
Для обоих проектов «Normalize CSS» и «The New CSS Reset» мы используем их как есть (из NPM), даже включая ненужные части из Normalize CSS , такие как исправление <h1>различных стилей элементов, которые будут удалены при сбросе CSS. .
Стиль заголовка в «Нормализовать CSS» <h1> :
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
Общий стиль удаления
В "The New CSS Reset" стили удаляются вообще (включая элементы):
/*
Remove all the styles of the "User-Agent-Stylesheet",
except for the 'display' property.
- The "symbol *" part is to solve Firefox SVG sprite bug
*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
Но вот тут что-то начинает идти не так. Чтобы понять эти проблемы, давайте поговорим об основах CSS, которые определяют наши стили:
порядок имеет значение
Порядок селекторов CSS имеет значение. Это связано с тем, что, как правило, более поздние стили сильнее, чем более ранние стили. В нашем случае порядок файлов сброса CSS был правильным.
Во-первых, мы хотим загрузить «Normalize CSS», который нормализует различия между разными браузерами, затем мы хотим использовать сброс CSS, чтобы удалить то, что нам не нужно, в нашем случае это использование «Нового сброса CSS».
Пример импорта Scss:
/* CSS Resets files order */
@use 'normalize'; /* 1 */
@use 'reset'; /* 2 */
/* In general, last code is stronger in CSS */
приоритет CSS
Мы определяем приоритет наших селекторов в соответствии с силой селекторов CSS (элемент, имя класса и имя идентификатора). Селекторы от самого слабого к самому сильному — это селекторы элементов, селекторы классов и селекторы идентификаторов.
В этом примере селекторы идентификаторов выиграют «войну за специфичность CSS», потому что селекторы идентификаторов сильнее, чем селекторы имен классов или селекторы элементов.
Это означает, что <h1> цвет элемента будет розовым.
<h1 class="title" id="mainTitle">some content</h1>
#mainTitle { color:pink; } /* 1 (ID), 0 (Classes), 0(element) */
.title { color:yellow; } /* 0 (ID), 1 (Classes), 0(element) */
h1 { color:red; } /* 0 (ID), 0 (Classes), 1(element) */
Наши конфликты специфики CSS
Если мы посмотрим на <h1> селектор Normalize CSS для элемента, у него есть возможности элемента:
/* 0 (ID), 0 (Classes), 1 (element) */
h1 {...}
Это относительно слабый селектор.
Давайте взглянем на основные селекторы сброса CSS из «Нового сброса CSS»:
/* 0 (ID), 0 (Classes), 0 (element) */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {...}
Чтобы максимально снизить специфичность, :where() используются псевдоселекторы. :where() Одна из основных идей псевдоселекторов — убрать любую специфику CSS, созданную селекторами.
Но здесь возникает конфликт ,<h1> стиль более мощный, чем стиль сброса CSS, что является проблемой для нас.
Один из способов разрешить этот конфликт — удалить ненужные части Normalize CSS , то есть удалить все стили, не являющиеся частью Shadow DOM . Однако это может стать проблемой, если мы автоматически загрузим проект из пакета NPM, так как его будет сложно поддерживать.
CSS-слои в помощь
Слои CSS были изобретены, чтобы решить проблему, заключающуюся в том, что мы хотим сообщить браузеру, что одни слои важнее других, и игнорировать приоритет CSS других слоев.
Для этого у нас есть @layerправила, определяющие слой. Он оборачивает частичные стили, определяет разделы слоя и обеспечивает приоритет CSS внутри самого слоя.
Только такой подход может решить нашу проблему.
Чтобы определить порядок слоев более точно, мы можем добавить @layer, который будет определять, в каком порядке вы хотите, чтобы код отображался.
@layer normalize {
/* CSS Normalize Here */
}
@layer the-new-css-reset {
/* CSS Reset here */
}
Это само по себе решит нашу проблему. Чтобы более точно определить порядок слоев, мы можем добавить «оператор слоя» , который указывает порядок, в котором вы хотите, чтобы код отображался.
Пример:
/* layer statement - define the order,
even if the order of the code will not be in the same way */
@layer normalize, the-new-css-reset;
@layer normalize {
/* CSS Normalize Here */
}
@layer the-new-css-reset {
/* CSS Reset here */
}
Поддержка препроцессора Sass.
@use 'sass:meta';
@layer normalize, the-new-css-reset;
@layer normalize {
@include meta.load-css('normalize');
}
@layer the-new-css-reset {
@include meta.load-css('the-new-css-reset');
}
Таким образом, мы можем хранить слои CSS в отдельных файлах и гарантировать, что последний слой выиграет битву за приоритет стиля, сохраняя при этом код чистым.
поддержка браузера
CSS-слои уже давно реализованы во всех основных браузерах.
Подведем итог
В этой статье в основном обсуждается, как мы можем решить проблему приоритета CSS, особенно проблему уровня сброса CSS.
По мере приближения к концу 2023 года этот метод использования слоев CSS для разрешения конфликтов CSS будет становиться все более распространенным, поскольку пользователи обновляют свои браузеры.
Создавая Pink Design , мы имели честь обслуживать разработчиков, пользователей, которые обычно регулярно обновляют свои браузеры. Поэтому мы решили принять этот новый подход к разработке со слоями CSS.