Эта статья поможет вам подготовиться к собеседованию по CSS, предоставляя список часто встречающихся вопросов с краткими ответами и ссылками на материалы для дополнительного изучения. Проверьте свои знания стилизации веб-страниц, а именно: основные концепции CSS, селекторы, свойства и техники, необходимые для успешного прохождения собеседования.
Ниже представлены вопросы по теме CSS (источник), которые часто задают на собеседовании. Прочитав вопрос, постарайтесь ответить на него так, как бы вы сделали это во время своего интервью. Под вопросом вы найдете ответ и ссылку на источники, раскрывающие тему подробнее.
1) Что такое специфичность селекторов CSS и как она работает?
Посмотреть ответ
Специфичность селектора (еще называют весом) это свойство определяющее приоритет стилевого правила, то есть то, какой стиль будет применен к HTML элементу в итоге. Например, используя какую-нибудь UI библиотеку, элементам этой библиотеки будут применены правила заданные авторами по умолчанию. При необходимости можно поменять стили на свои, «перебив» дефолтные более специфичным селектором.
Подробнее тут:
2) Какая разница между сбросом и нормализацией CSS? Что вы выберете и почему?
Посмотреть ответ
Цель сброса CSS — сбросить все стили в ноль для того, чтобы можно было начать стилизацию сайта с чистого листа. Недостатком сброса стилей является то, что частично их придется устанавливать заново. Цель нормализации — привести исходные стили к единому состоянию, во всех браузерах. Если рассматривать Normalize.css, то с его помощью не просто устанавливаются определенные значения стилей, но и решаются некоторые проблемы отображения элементов, в особенности в мобильных браузерах. Выбирать между двумя инструментами стоит в зависимости от поставленной задачи.
Подробнее тут:
3) За что отвечает свойство float и как оно работает?
Посмотреть ответ
Определяет сторону, по которой будет выровнен элемент. Соседние элементы будут «обтекать» такой элемент по противоположной стороне.
Подробнее тут:
4) Что делает свойство z-index и как формируется контекст наложения?
Посмотреть ответ
Определяет положение элемента по оси Z. Если элементы перекрываются друг другом (накладываются), это свойство диктует порядок наложения. Работает только для элементов у которых свойство position установлено как absolute/relative/fixed.
Подробнее тут:
5) Опишите BFC (Block Formatting Context — блочный контекст форматирования) и принцип его работы.
Посмотреть ответ
Block formatting context — это область, в которой происходит форматирование и размещение блочных элементов. Он играет важную роль в определении того, как элементы взаимодействуют друг с другом по отношению к своим родительским и соседним элементам.
Принцип работы BFC заключается в том, что каждый блочный контейнер формирует свой собственный контекст форматирования, внутри которого происходит распределение и позиционирование его потомков. Это позволяет избежать некоторых типичных проблем в верстке, таких как проблемы с плавающими элементами, внешними отступами и переполнениями контейнеров.
Создать BFC можно с помощью определенных CSS свойств, таких как overflow, float, display и position. Например, установка свойства overflow на значение, отличное от visible, создаст BFC для элемента.
Подробнее тут:
6) Какие существуют методы очистки floats и какие из них подходят для какого контекста?
Посмотреть ответ
Свойство clear, примененное к нижестоящему (от float) элементу со значениями left, right, both, а также свойство overflow со значением hidden. Само по себе свойство overflow управляет отображением содержимого блока (добавляет полосы прокрутки, обрезает не поместившийся контент), в добавок, значения auto, scroll или hidden отменяют свойство float.
Подробнее тут:
7) Каким образом вы боритесь с проблемами стилизации, связанными с кросс-браузерностью?
Посмотреть ответ
Есть несколько основных решений проблем стилизации, связанных с кросс-браузерностью. Например, разделение стилей для разных браузеров и устройств, а также добавление вендорных префиксов к стилевым правилам. Метод разделения стилей заключается в идентификации вида браузера пользователя и применении соответствующего стиля в дополнение к основным стилям. С помощью правила @media можно указать тип устройства, для которого будет применены определенные стили, а добавление вендорных префиксов к стилям расширит список поддерживаемых браузеров.
Подробнее тут:
8) Как работать со стилями в старых браузерах с ограниченными возможностями? Какие методы/техники вы используете?
Посмотреть ответ
Подход progressive enhancement предполагает поэтапное создание веб-интерфейсов, должны создаваться поэтапно, циклически, от простого к сложному. На каждом из этапов создается законченный веб-интерфейс, как улучшенная версия предыдущего. Всего можно выделить 4 этапа:
- HTML — содержимое страницы размечается с помощью HTML. Важно сделать логически и семантически правильную разметку, тогда документ будет корректно отображен любым браузером. Этот этап является самым важным.
- CSS — документ получает аккуратный вид: появляется сетка страницы, фоновые изображения и т.д.
- CSS3 — добавляются анимационные и декоративные фишки, тени, плашки, уголки и т.д.
- JavaScript — улучшается взаимодействие с интерфейсом: AJAX решения, динамические элементы и т.д.
Такой подход в сочетании с mobile first гарантирует, что страница сайта будет корректно отображаться на любых устройствах. Подход graceful degradation имеет обратную философию — функционал сайта деградирует от сложного к более простому в ранних версиях браузеров, где еще не реализованы последние фичи. Для определения наличия нужного функционала браузера используется другой прием — feature detection (правило @supports)
Подробнее тут:
9) Какие вы знаете способы для скрытия контента сайта (при этом оставив его доступным для скринридеров)?
Посмотреть ответ
Свойство opacity со значением 0 скрывает элемент и все его дочерние элементы. Скрытый контент всё ещё присутствует на странице, его место ничем не занято. Техника .sr-only позволяет скрыть элемент, но оставить его доступным для скринридеров
.sr-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}Подробнее тут:
10) Вы, когда-либо, использовали Grid систему, и, если да, то какую технологию для упрощения разметки HTML-страниц вы предпочитаете?
Посмотреть ответ
Grid Layout — двумерная сетка (набор вертикальных и горизонтальных линий) для CSS. Используется для размещения основных областей страницы или небольших элементов пользовательского интерфейса. Элементы помещаются в сетку, соответственно строкам и столбцам. Grid позволяет создать сетку с фиксированными размерами полос, размещать элементы в заданном месте, создавать дополнительные полосы для управления контентом и выравниванием. В сочетании с flexbox, grid Layout позволяет строить макеты, создание которых при помощи чистого CSS невозможно.
Подробнее тут:
11) Что вы можете рассказать о медиа-запросах?
Посмотреть ответ
Медиа-запросы позволяют адаптировать страницы для разных типов устройств (принтеров, речевых браузеров и т.д.) или для устройств с определенными характеристиками: ширина (width), высота (height), соотношение ширины к высоте области просмотра (aspect-ratio), ориентация (orientation), разрешение (resolution), количество бит на каждый из цветовых компонентов устройства (color) и другие.
Подробнее тут:
12) Что вы можете рассказать о стилизации SVG?
Посмотреть ответ
Стилизация (изменение внешнего вида) SVG-элементов аналогично HTML, с некоторыми особенностями: фон назначается свойством fill, а граница — stroke вместо border. Свойства могут добавляться как непосредственно в теги, так и как стили. Также возможно подключение внешних стилей. Поскольку SVG основан на XML-разметке, то стиль в .svg-документе необходимо заключать в CDATA, иначе конструкция будет конфликтовать с XML-парсерами. SVG — элементы можно группировать с помощью тэга g и применять к ним общие стили.
Подробнее тут:
13) Приведите какой-либо пример свойства @media отличительного от @media screen?
Посмотреть ответ
- @media all — значение по умолчанию, для всех типов устройств.
- @media print — принтеры.
- @media speech — программы для воспроизведения текста вслух (в том числе речевые браузеры) и речевые синтезаторы.
Подробнее тут:
14) Какие моменты по написанию эффективного CSS вы бы выделили?
Посмотреть ответ
- Код должен быть валидным (корректно выполняться).
- Комментарии должны быть подробными.
- Код должен быть разбит на логические блоки, каждый блок нужно отделять пустой строкой.
- Использование иерархии облегчает чтение кода.
- Свойства желательно размещать в алфавитном порядке.
- Каскадные таблицы (CSS) нужно размещать в отдельном файле.
- Неиспользуемые селекторы нужно удалять.
- Нужно использовать там, где возможно, универсальные свойства.
Подробнее тут:
15) Каковы преимущества/недостатки использования препроцессоров CSS? Опишите, что вам понравилось/не понравилось в использованных вами, препроцессорах.
Посмотреть ответ
Преимущества использования препроцессоров: использование дополнительного функционала (переменных, условий, циклов, функций и т.д.). Недостатки, в целом, проявляются при неправильном использовании этого функционала. Например:
- Злоупотребление примесями (@mixin, когда один объект копирует свойства другого объекта). В итоге значительно увеличивается размер файла и падает общая производительность.
- Использование расширения (@extend) в Sass позволяет избежать описанную выше проблему, но может возникнуть другая: многократное расширение базового класса может привести к получению CSS-правила с длинным именем селектора, что плохо сказывается на производительности.
- При редактировании миксина или базового класса можно, не заметив, изменить свойства множества объектов.
- Обобщая селекторы, можно слишком увеличить их специфичность, что затруднит их управление и поддержку.
В целом, использование препроцессоров предоставляет отличные синтаксис и возможности, но нужно тщательно взвешивать все за и против их использования для каждого конкретного проекта.
Подробнее тут:
16) Какие существуют псевдоэлементы и для чего они используются.
Посмотреть ответ
Псевдоэлемент в CSS — это ключевое слово, которое добавляется к селектору и позволяет стилизовать определенную часть выбранного элемента. Псевдоэлементы: :after, :before, :first-letter, :first-line.
- :after — применяется для вставки нужного контента после выбранного элемента. Применяется со свойством content, которое определяет содержимое для вставки.
- :before — применяется для вставки нужного контента до выбранного элемента. Также необходимо задать свойство content с содержимым для вставки.
- :first-letter — добавляет к первому элементу в тексте и определяет его стиль: можно создавать буквицу (увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста) или выступающий инициал (увеличенная прописная буква, линия которой совпадает с линией основного текста).
- :first-line — используется для изменения первой строки блочного текста.
Подробнее тут:
17) Что такое блочная модель, и как, с помощью CSS, менять расположение блоков на странице в браузере?
Посмотреть ответ
Блочная модель — модель, при которой каждый элемент представляет собой прямоугольный блок и имеет ширину, высоту, поля, границы и отступы. Менять расположение элементов можно с помощью позиционирования (position), отступов (margin) и трансформирования (transform).
Подробнее тут:
18) Что делает свойство *{box-sizing: border-box;}? Какие его преимущества?
Посмотреть ответ
При использовании box-sizing: border-box свойства width и height включают в себя значения padding и border, но не отступов (margin). Т.е. объект остается с фиксированными параметрами, но уменьшается место для контента. При использовании border-box, не нужно беспокоиться о том, сколько места будет занимать отступ или граница, так как эти значения просто отнимаются от общей ширины, а не добавляются к ней
Подробнее тут:
19) За что отвечает свойство display в CSS? Приведите пару примеров его использования.
Посмотреть ответ
Свойство display определяет как элемент будет показан в документе. Если указать свойству display значение none, то элемент и все его дочерние элементы будет удалены из дерева доступности (объект в котором хранится информация для вспомогательных технологий по обеспечению доступности сайта для людей с повышенными потребностями) и не будут восприниматься технологиями чтения экранов. Значение свойства display — contents, удаляет элемент из дерева доступности, дочерние элементы становятся дочерними элементами следующего уровня в DOM.
Подробнее тут:
20) Объясните разницу между значениями inline и inline-block?
Посмотреть ответ
Inline и inline-block это значения, которые можно назначить свойству display. При использовании inline для любого элемента он становится строчным. Inline-block объединяет в себе характеристики как строчных, так и блочных элементов: блочный элемент с поведением, как у строчного. Содержимое таких элементов будет отображаться, как обычно, но при этом блоки будут вести себя как строчные элементы, выстраиваясь в одной строке друг за другом и переносясь на новую строку лишь при необходимости.
Подробнее тут:
21) Объясните разницу между псевдоклассами «nth-of-type()» и «nth-child()» ?
Посмотреть ответ
- nth-of-type() используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.
- nth-child() это псевдокласс, который используется для выбора дочерних элементов с помощью числового выражения без учета типов элементов.
Подробнее тут:
22) Объясните разницу между relative, fixed, absolute и static — видами позиционирования элемента?
Посмотреть ответ
- Relative — положение элемента задается относительно исходного расположения. Сам элемент становится родительским для всех дочерних, абсолютно позиционировнных элементов.
- Fixed — положение элемента привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке страницы.
- Absolute — положение элемента задается относительно границ родительского элемента (тот у которого position: relative), элемент выпадает из изначального контекста.
- Static — положение элемента остается неизменным. Такой вид позиционирования еще называют нормальным. Элементы отображаются в том же порядке, как они идут в исходном коде
Подробнее тут:
23) Какие CSS фреймворки вы использовали? Как бы вы изменили/улучшили их?
Посмотреть ответ
Foundation — это адаптивный фреймворк, который позволяет легко создавать красивые адаптивные веб-сайты, приложения и электронные письма. Основа семантическая, удобочитаемая, гибкая и полностью настраиваемая. Foundation достаточно громоздкий и сложный для начинающих разработчиков, но создатели проводят учебные занятия.
Подробнее тут:
24) В чем разница между разработкой адаптивных веб-сайтов и использовании “Mobile first” стратегии?
Посмотреть ответ
При адаптивной разработке главными являются 3 вещи: резиновый макет, медиа-выражения и гибкие картинки. Все размеры рекомендуют указывать в процентах для большей точности. Сайт должен быть ориентирован не на конкретное устройство, а на содержимое. Mobile First — подход, который предполагает сначала разработку мобильной версии, а затем ее усложнение до десктопной. Самая важная информация должна быть показана первой. Сайт должен быть легким, для быстрой загрузки при любой скорости интернета.
Подробнее тут:
25) Работали ли вы с оптимизацией графики для Retina экранов? Какие методы вы использовали?
Посмотреть ответ
Разные методы оптимизации графики подходят для разных задач:
- Для одностраничных сайтов с несколькими изображениям можно задать параметры width и height тегу img просто разделив пополам размеры изображения.
- На сайтах с несколькими изображениями в контенте можно делить пополам размеры изображений используя Javascript.
- На сайтах с ограниченным количеством фоновых изображений можно использовать изображение в качестве фона с необходимыми размерами (background-size) определенного div‘а.
- На сайтах или в приложениях, в которых применяется background-image для элементов дизайна, но нет изображений внутри контента device-pixel-ratio, чтобы установить нужное соотношение между физическими и CSS-пикселями.
- На сайтах с большим количеством иконок и для быстрого прототипирования можно использовать иконочные шрифты (замена букв в шрифте на нужные символы с последующим их отображением на странице с помощью CSS).
- На любых сайтах с изображениями в контенте можно использовать window.devicePixelRatio для оптимизации графики.
- Масштабируемую векторную графику (SVG) можно использовать на любых сайтах, он подходит для иконок, логотипов и простых векторных иллюстраций.
Подробнее тут:
26) В каких случаях есть смысл использовать функцию translate() вместо абсолютного позиционирования и наоборот ? И почему?
Посмотреть ответ
В случае создания анимаций, использование 2D-трансформаций вместо абсолютного позиционирования обычно обеспечивает большую частоту кадров за счёт более быстрого рендеринга. Свойство position имеет большее отношение к вёрстке, а не к визуальным эффектам и анимации, поэтому абсолютное позиционирование лучше использовать при необходимости статически разместить контент.
Подробнее тут:
