Объясните как браузер определяет на какие элементы накладывать css стили

Обновлено: 22.01.2025

Ниже представлены вопросы по теме CSS (источник). Прочитав вопрос, постарайтесь ответить на него так, как бы вы сделали это на собеседовании. Под вопросом вы найдете ответ и ссылку на источники раскрывающие тему подробнее.

1) Что такое специфичность селекторов CSS и как она работает?

Подробнее тут:

2) Какая разница между сбросом и нормализацией CSS? Что вы выберете и почему ?

Подробнее тут:

3) За что отвечает свойство float и как оно работает ?

Подробнее тут:

4) Что делает свойство z-index и как формируется контекст наложения?

Определяет положение элемента по оси Z. Если элементы перекрываются друг другом (накладываются), это свойство диктует порядок наложения. Работает только для элементов у которых свойство position установлено как absolute/relative/fixed.

Подробнее тут:

6) Какие существуют методы очистки floats и какие из них подходят для какого контекста ?

Свойство clear, примененное к нижестоящему (от float) элементу со значениями left, right, both, а также свойство overflow со значением hidden. Само по себе свойство overflow управляет отображением содержимого блока (добавляет полосы прокрутки, обрезает не поместившийся контент), в добавок, значения auto, scroll или hidden отменяют свойство float.

Подробнее тут:

7) Каким образом вы боритесь с проблемами стилизации, связанными с кросс-браузерностью?

Есть несколько основных решений проблем стилизации, связанных с кросс-браузерностью. Например, разделение стилей для разных браузеров и устройств, а также добавление вендорных префиксов к стилевым правилам. Метод разделения стилей заключается в идентификации вида браузера пользователя и применении соответствующего стиля совместно с основным, путем добавления условных комментариев (для IE) или CSS-хаков. С помощью правила @media можно указать тип устройства, для которого будет применены определенные стили, а добавление вендорных префиксов к стилям расширит список поддерживаемых браузеров.

Подробнее тут:

8) Как работать со стилями в старых браузерах с ограниченными возможностями? Какие методы/техники вы используете ?

Подробнее тут:

9) Какие вы знаете способы для скрытия контента сайта (при этом оставив его доступным для скринридеров)?

Свойство opacity со значением 0 скрывает элемент и все его дочерние элементы. Скрытый контент всё ещё присутствует на странице, его место ничем не занято. Техника .sr-only позволяет скрыть элемент, но оставить его доступным для скринридеров

Подробнее тут:

10) Вы, когда-либо, использовали Grid систему, и, если да, то какую технологию для упрощения разметки HTML-страниц вы предпочитаете?

Подробнее тут:

11) Что вы можете рассказать о медиа-запросах ?

Медиа-запросы позволяют адаптировать страницы для разных типов устройств (принтеров, речевых браузеров и т.д.) или для устройств с определенными характеристиками: ширина (width), высота (height), соотношение ширины к высоте области просмотра (aspect-ratio), ориентация (orientation), разрешение (resolution), количество бит на каждый из цветовых компонентов устройства (color) и другие.

Подробнее тут:

12) Что вы можете рассказать о стилизации SVG?

Подробнее тут:

13) Приведите какой-либо пример свойства @media отличительного от @media screen ?

Подробнее тут:

14) Какие моменты по написанию эффективного CSS вы бы выделили?

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

Подробнее тут:

15) Каковы преимущества/недостатки использования препроцессоров CSS? Опишите, что вам понравилось/не понравилось в использованных вами, препроцессорах.

Злоупотребление примесями (@mixin, когда один объект копирует свойства другого объекта). В итоге значительно увеличивается размер файла и падает общая производительность.
Использование расширения (@extend) в Sass позволяет избежать описанную выше проблему, но может возникнуть другая: многократное расширение базового класса может привести к получению CSS-правила с длинным именем селектора, что плохо сказывается на производительности.
При редактировании миксина или базового класса можно, не заметив, изменить свойства множества объектов.
Обобщая селекторы, можно слишком увеличить их специфичность, что затруднит их управление и поддержку.

Подробнее тут:

16) Какие существуют псевдоэлементы и для чего они используются.

Подробнее тут:

17) Что такое блочная модель, и как, с помощью CSS, менять расположение блоков на странице в браузере?

Блочная модель — модель, при которой каждый элемент представляет собой прямоугольный блок и имеет ширину, высоту, поля, границы и отступы. Менять расположение элементов можно с помощью позиционирования (position), отступов (margin) и трансформирования (transform).

Подробнее тут:

18) Что делает свойство *? Какие его преимущества ?

При использовании box-sizing: border-box свойства width и height включают в себя значения padding и border, но не отступов (margin). Т.е. объект остается с фиксированными параметрами, но уменьшается место для контента. При использовании border-box, не нужно беспокоиться о том, сколько места будет занимать отступ или граница, так как эти значения просто отнимаются от общей ширины, а не добавляются к ней

Подробнее тут:

19) За что отвечает свойство display в CSS? Приведите пару примеров его использования.

Подробнее тут:

20) Объясните разницу между значениями inline и inline-block ?

Inline и inline-block это значения, которые можно назначить свойству display. При использовании inline для любого элемента он становится строчным. Inline-block объединяет в себе характеристики как строчных, так и блочных элементов: блочный элемент с поведением, как у строчного. Содержимое таких элементов будет отображаться, как обычно, но при этом блоки будут вести себя как строчные элементы, выстраиваясь в одной строке друг за другом и переносясь на новую строку лишь при необходимости.

Подробнее тут:

nth-of-type() используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.
nth-child() это псевдокласс, который используется для выбора дочерних элементов с помощью числового выражения без учета типов элементов.

Подробнее тут:

23) Какие CSS фреймворки вы использовали? Как бы вы изменили/улучшили их?

Подробнее тут:

24) В чем разница между разработкой адаптивных веб-сайтов и использовании “Mobile first” стратегии ?

Подробнее тут:

25) Работали ли вы с оптимизацией графики для Retina экранов? Какие методы вы использовали?

Подробнее тут:

26) В каких случаях есть смысл использовать функцию translate() вместо абсолютного позиционирования и наоборот ? И почему?

Многие считают CSS сложным. Они придумывают разные оправдания: не хватает способностей понимать CSS или CSS сам по себе плох. Но реальность такова, что люди просто не нашли время, чтобы действительно изучить его. Если вы читаете эту статью, значит заинтересованы в изучении CSS и это здорово!

Что такое CSS специфичность?

Вы когда-нибудь писали стиль, а он не работает, потом вы добавляете !important (или нет), и все же он не работает? Затем вы смотрите на Devtools и понимаете, что другой стиль где-то перекрывает ваш?

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

Специфичность CSS важна только тогда, когда несколько селекторов влияют на один и тот же элемент. Браузеру нужен способ выяснить, какой стиль применять к соответствующему элементу, когда существуют противоречивые значения свойств.
Когда два или более совпадающих селектора имеют одно и то же значение (вес) специфичности, браузер выбирает «самый последний» совпадающий селектор, который появляется ближе к нижней части списка совпадающих селекторов. Следующий пункт объясняет, что такое «список подходящих селекторов».
Браузер формирует «список подходящих селекторов», комбинируя все стили на веб-странице и отфильтровывая те, которые не соответствуют элементу «currently-being-styled». Первые селекторы в таблице стилей находятся вверху списка, а последние селекторы — внизу.
Свойство style для элемента имеет большее значение специфичности, чем селекторы в таблицах стилей, за исключением случаев, когда есть !important в селекторе таблиц стилей.
Использование !important (что в некоторых случаях считается плохой практикой) изменяет специфичность селектора. Когда два селектора имеют одинаковую специфичность, выигрывает селектор с !important. И когда они оба имеют !important, «самый последний» селектор выигрывает.

Значение специфичности

Теперь мы можем перейти к тому, как браузер определяет значения специфичности селектора.

Специфичность селектора может быть представлена в виде трехзначной строки, разделенной дефисом (или чем угодно): «2–4–1». Первая цифра — это количество присутствующих селекторов ID, вторая — это количество селекторов классов, селекторов атрибутов и псевдоклассов, а третья — количество имеющихся селекторов типов и псевдоэлементов. Например:

Определение самого “специфичного”

Чтобы определить, какой селектор обладает большей специфичностью, вы можете сравнить каждое из трех значений.

Далее сравниваем значения 1 и 3, 3 выигрывает. На данный момент .red.blue.yellow имеет большее значение специфичности.

CSS-специфичность селектора и дает хорошее объяснение того, почему никакое количество селекторов классов не может переопределить селектор ID.

Небольшие предупреждения

Надеюсь, что эта статья проста для понимания и помогла разобраться, что такое CSS специфичность. Теперь вы можете посмотреть на стиль и с легкостью определить, насколько он «специфичен».

Форум Приднестровской поддержки CMS XOOPS.

По ссылке вы можете скачать последнюю версию CMS XOOPS. А так же прочитать инструкции по установке XOOPS и модулей

По данным ссылкам можно скачать модули нашей разработки.

Модуль инструкций. Ознакомьтесь с установкой XOOPS. C начальными познаниями по HTML,CSS, JS, PHP и др.

Приднестровская поддержка XOOPS

Каким образом браузер определяет, какие стили нужно использовать Каким образом браузер определяет, какие стили нужно использовать

Как браузер может «понять» намерения разработчика? Если к одному и тому же элементу могут быть применены несколько стилей, то определение, какие из них будут использованы, происходит по принципу
каскадирования.

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

Решение

На выбор применяемого браузером стиля влияют четыре фактора: вес, источник, конкретность и порядок следования.

Вес определенного описания стиля можно определить с помощью ключевого слова !important, добавляемого после значения свойства. При этом свойство приобретает приоритетное значение над аналогичными свойствами, указанными в других правилах стиля, за исключением редких случаев. Применение ключевого свойства !important сильно усложняет процесс поддержки кода; кроме того, необходимость в его использовании возникает не слишком часто. Ввиду приведенных причин рекомендуется по возможности избегать его, как в примерах данной книги. Дополнительную информацию о данном ключевом слове можно найти в документации SitePoint CSS Reference

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

Помимо этого, влияние каскадирования на поведение стилей CSS зависит от степени конкретности свойств и порядка их следования.

Правило стиля с более конкретным селектором переопределяет стили, задаваемые правилом с более общим селектором. Рассмотрим этот механизм на практическом примере со следующим несложным HTML- кодом:

А теперь обратите внимание на правила стилей, применяемых к приведенной выше разметке:

Однако длину селекторов не стоит рассматривать как показатель степени конкретности. К примеру, селектор ID всегда будет иметь более высокий приоритет, чем селектор типа или класса. Чем сложнее используемые вами селекторы, тем труднее разобраться в степени их важности, при этом приведенные в данной книге примеры достаточно просты. Точную формулу измерения степени конкретности вы можете найти в документации SitePoint CSS Reference

Если, несмотря на вышеперечисленные факторы, остается несколько стилей, которые могут быть применены по отношению к одному и тому же элементу, в расчет принимается порядок следования правил – в этом случае будет использовано последнее из них. В приведенном выше примере степень значимости селекторов p и .message одинакова, поэтому при отсутствии иных регулирующих принципов используется правило стиля, записанное последним, – в данном случае с селектором .message. Так же дело обстоит и при объявлении в таблице стилей нескольких правил с одним и тем же селектором – например, .message. В этом случае будет применено правило, определенное вторым. В последующих главах мы увидим, что такой механизм работы можно эффективно использовать для достижения своих целей.

Специфичность — это алгоритм, по которому браузер определяет, какие стили применить в конкретному элементу. В вычислениях участвуют CSS-селекторы. Если одному и тому же элементу подходит сразу несколько CSS-правил с разными селекторами, то браузер применяет те стили, вес селектора которых выше (или тяжелее 🤔). При этом может нарушаться правило каскада: «кто ниже, тот и выигрывает».

Это одно из базовых понятий в CSS.

Вес селекторов

Давайте разберёмся как браузер взвешивает селектор. Ниже перечислены типы селекторов по убыванию специфичности:

Система расчёта

Существует удобный способ вычисления веса селектора в уме. Выше мы перечислили 3 группы сущностей из которых может состоять селектор. Представим любой селектор в виде трёх нулей: 0.0.0.

Селекторы по идентификатору увеличивают первую цифру.
Селекторы по классу, по атрибуту или псевдокласс увеличивают вторую цифру.
Селектор по тегу или псевдоэлемент увеличивают третью цифру.

Один селектор равен единице.

Пока сложно понять. Давайте разберёмся на примерах.

Дальше аналогично можем посчитать вес комбинированных селекторов:

Если не очень хочется считать в уме, то можно воспользоваться калькулятором специфичности CSS Specificity calculator.

Атрибут style

CSS-свойства, написанные в атрибуте style внутри HTML-разметки перебивают свойства, написанные для этого элемента во внешних CSS-файлах или внутри тега <style> . Так что формально атрибут style самый специфичный, у него самый высокий вес.

Иногда его добавляют в формулу в виде четвёртой цифры, стоящей перед всеми. Посмотрим на примере:

У селектора в CSS будет специфичность 1.1.1 потому что там указан один идентификатор, один класс и один селектор тега. Но в итоге текст в блоке будет пурпурным, а рамки не будет совсем. Потому что у тега style вес равен 1.0.0.0 🏋️

!important

Ключевое слово !important нарушает все установленные спецификацией законы и насильно применяет свойство, после которого написано. Ему плевать на селектор CSS-правила, внутри которого это свойство написано. Будет так и никак иначе.

Формально это ключевое слово не имеет отношения к концепции специфичности. Но из-за его варварских замашек нельзя не принимать его во внимание.

Тут к месту будет ещё раз напомнить, что ключевое слово !important нужно всегда использовать с осторожностью и не злоупотреблять им. В том числе из-за того, что оно нарушает естественную работу специфичности и каскада.

На практике

Вадим Макеев

Представим, что у нас есть простой блок с двумя классами:

Если написать классы в порядке сначала .tomato , а потом .plum , то текст будет сливовый (plum):

Если поменять классы в CSS местами, то победит последний и текст станет томатным:

Но если нарастить класс .tomato им самим же… что?! Да-да, он выиграет в любом порядке: текст будет томатным.

Потому, что у него выше специфичность! Нужно больше специфичности? Легко! Класс можно продолжать наращивать, пока вам не хватит.

Алёна Батицкая

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

Если у вас возникает соблазн перебить существующие стили более специфичным селектором, то советую вам разобраться в первопричине проблемы, а не поддаваться порыву.

Такой трюк может быть обоснован только если вы работаете на проекте, к исходникам которого у вас нет доступа, а стили поменять надо. Там придётся подбирать тяжёлые в плане специфичности селекторы, ничего не поделать 😔

В данной главе подробно объясняется, почему каскадные таблицы стилей (Cascading Style Sheets, CSS) называются каскадными. Для начала давайте вспомним, какими способами можно добавить стиль на веб-страницу:

подключить внешнюю таблицу стилей;
добавить внутреннюю таблицу стилей в HTML-документ через тег <style> ;
определить стиль элемента, применив к тегу атрибут style с необходимыми значениями (inline-стиль).

Эти способы добавления стилей могут быть использованы одновременно. К примеру, для тегов <p> может быть одновременно задан стиль как во внешней таблице стилей, так и во внутренней. Кроме того, в одной таблице стилей может быть записано несколько вариантов форматирования тегов <p> . Например:

В этом примере для тегов <p> указано три варианта форматирования. Но каким образом браузер расставляет приоритеты между стилями? Какой стиль из вышеприведенных будет выбран и по какому принципу? Это нам и предстоит выяснить.

Приоритеты стилей

Каскадность CSS – это механизм, благодаря которому к элементу HTML-документа может применяться более чем одно правило CSS. Правила могут исходить из различных источников: из внешней и внутренней таблицы стилей, от механизма наследования, от родительских элементов, от классов и ID, от селектора тега, от атрибута style и т. д. Поскольку в этих случаях часто происходит конфликт стилей, была создана система приоритетов: в конечном итоге применяется тот стиль, который исходит от источника с более высоким приоритетом.

Какие источники являются более значимыми, а какие – менее? Разобраться в этом поможет эта таблица, где указан вес (значимость) каждого селектора. Чем больше вес, тем выше приоритет:

Селектор тега:	1
Селектор класса:	10
Селектор ID:	100
Inline-стиль:	1000

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

Если случилось так, что два селектора имеют одинаковый вес, то приоритет отдается тому стилю, который находится ниже в коде. Если для одного элемента задан стиль и во внешней, и во внутренней таблицах, то приоритет отдается стилю в той таблице, которая находится ниже в коде.

Пример: во внутренней таблице стилей задан красный цвет для тегов <p> , а во внешней – зеленый цвет для этих же тегов. В HTML-документе вы первым делом подключили внешнюю таблицу стилей, а затем добавили внутреннюю таблицу с помощью тега <style></style> . В итоге цвет тегов <p> будет красным.

Это – один из способов управлять значимостью стилей. Еще один способ повысить приоритет – специально увеличить вес селектора, например, добавив к нему ID или класс.

Объявление !important

Если вы столкнулись с экстренным случаем и вам необходимо повысить значимость какого-либо свойства, можно добавить к нему объявление !important :

Также !important перекрывает inline-стили. Слишком частое применение !important не приветствуется многими разработчиками. В основном, данное объявление принято использовать лишь тогда, когда конфликт стилей нельзя победить иными способами.

Сброс стилей с помощью reset.css

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

Каждый браузер имеет свои отличия во встроенных стилях: например, в IE нет отступа от верхнего края окна, а в Firefox есть. Таких отличий существует много. Чтобы они не создавали помех для кроссбраузерности при написании собственного стиля CSS, можно воспользоваться методом сброса встроенных стилей.

Инструмент для сброса стилей – это, по сути, та же самая таблица CSS, где описаны правила, которые сбрасывают встроенные стили браузеров, устанавливая базовые значения свойств. Называется такая таблица reset.css и служит для того, чтобы вы могли начать создавать стиль «с нуля». Вот пример стандартной таблицы сброса:

Этот вариант таблицы Reset.css разработал известный опытный специалист по стандартам HTML и CSS Эрик Мейер. Он работает в области веб-технологий с 1993 года и является автором многих книг по CSS.

Конечно же, существуют и другие вариации Reset CSS, например, более популярный сейчас Normalize.css, который, в отличие от Reset CSS, сохраняет много полезных стилей по умолчанию, а не стирает их начисто. Это удобно, поскольку избавляет от необходимости вновь объявлять стили для многих стандартных элементов.
Если требуется, вы и сами можете создать свой файл сброса стилей, исходя из ваших потребностей.

А сейчас вкратце о том, что делает вышеприведенная таблица сброса стилей:

в первом селекторе собраны наиболее популярные теги, для которых удаляются все отступы, рамки и поля, а также назначается размер шрифта 100%;
второй групповой селектор предназначен для правильного отображения тегов HTML5 в старых браузерах;
с помощью свойства line-height селектора body устанавливается одинаковый интерлиньяж (межстрочный интервал) для текста;
для списков ol , ul убраны маркеры;
отменены кавычки и другой контент перед и после содержимого тегов blockquote , q ;
упрощено добавление рамок для ячеек таблиц.

Файл сброса стилей необходимо подключать раньше, чем собственные стили. Если вы внимательно читали абзац о приоритетах, то уже поняли, почему reset.css должен находиться перед другими стилями: потому что правила, указанные ниже в коде, перезаписывают правила, объявленные ранее.

Итоги

Каскадность в CSS – это способность стилевых правил накладываться друг на друга, перезаписывать и смешиваться. Итоговый стиль элемента, который виден в браузере – это комбинация нескольких последовательно примененных стилей.

При конфликте нескольких стилей срабатывает правило приоритетов. Предпочтение отдается тому стилю, который считается более значимым.

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

Первая часть нашего учебника подошла к концу. Второй раздел книги мы начнем с изучения CSS шрифтов, веб-шрифтов и способов их подключения.

Читайте также: