Вопросы и задачи на собеседованиях ²⁴

Каскадная таблица стилей. Стилизовать HTML элементы.

CSS правило состоит из двух элементов: селектор и объявление свойства внутри фигурных скобок, у свойства указывается значение.

4 основных способа: инлайном внутри html элемента, использование глобальных стилей внутри тега <style>, использование внешнего файла CSS и с помощью import внутри CSS файла

Static — тип позиционирования, который присваивается всем элементам по умолчанию, находятся в основном потоке элементов и перемещать их нельзя. Relative — относительное позиционирование, при котором элемент можно перемещать его начального положения в документе, сам элемент находится в основном потоке. Absolute — абсолютное позиционирование, при котором элемент можно перемещать и он формирует новый поток, позиционирование происходит от первого родителя, в котором position не static, если такого нет, то позиционироваться он будет относительно окна браузера. Fixed — фиксированное позиционирование, такое же, как и абсолютное, но элемент движется вместе с прокруткой экрана, позиционирование происходит от окна браузера, игнорируется позиционирование родительских элементов. Sticky — позиционирование при котором элемент ведет себя как fixed, но может двигаться относительно родителя.

Блочная модель ^MDN

Каждый элемент в CSS заключён в блок. Блочная модель позволяет рассчитать какой будет размер конечного элемента на странице.

Селектор — это часть CSS правила, которая сообщает браузеру, к какому элементу или элементам будет применен стиль. Селекторы бывают простыми и составными. Простые — где указывается один вариант селектора. Составной — это набор селекторов соединенных пробелом или комбинатором (+, >, запятая), а еще псевдо-классы и псевдо-селекторы.

Специфичность селектора базируется на весе селектора. Самый приоритетный — инлайновый, потом ID, далее CLASS, ATTRIBUTE, PSEUDO-CLASS, и самый низкий ELEMENT и PSEUDO-ELEMENT. Для расчета веса селектора необходимо суммировать все входящие в него элементы. Это нужно, чтобы писать чистый CSS без использования important.

Все элементы обладают собственными базовыми стилями. Проблема в том, что во всех браузерах эти стили разные. Чтобы этого избежать можно обнулить и сбросить дефолтные стили с помощью Reset.css (вариант которого сегодня стараются избегать, потому что сброшенные стили частично нужно устанавливать заново) или оптимизировать и привести их к единому стилю с помощью Normalize.css.

margin — внешний отступ, padding — внутренний.

Оба правила скрывают элемент на странице. display: none — скрывает элемент со страницы, убирает элемент из основного потока, скрывает контент для поисковых роботов, элемент доступен лишь в DOM дереве. visibility: hidden — скрывает элемент со страницы, но не убирает из основного потока. В итоге он не виден, но занимает отведенное ему место в основном потоке.

Блочные элементы — идут друг под другом занимая всю ширину, им можно задавать размеры, margin и padding. Строчные элементы — идут друг за другом, в одном ряду может быть несколько и меняют ширину и высоту в зависимости от контента, нельзя задавать width и height, margin и padding сверху и снизу игнорируется.

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

Картинка, которая объединяет в себе несколько картинок. Чтобы уменьшить количество запросов к серверу.

Вендорные префиксы, это приставки к CSS свойствам, которые еще не утверждены в стандарт и поддерживаются браузерами в тестовом режиме. Нужны для кроссбраузерности.

Это ключевое слово, которое добавляется CSS селектору и позволяет стилизовать определенные части элемента. Например ::first-letter, ::before, ::after, ::selection, ::first-line.

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

Это такая программа, когда ты пишешь CSS подобный код со своими фичами, а на выходе генерируется обычный нативный CSS. Препроцессоры используют ради: переменных, вложенности правил, миксинов (переиспользуемые куски кода), Sass, less, stylus.

Это свойство для позиционированного элемента (т.е. если у него задано свойство position со значением, отличающимся от static) свойство z-index отвечает за: 1. Порядок наложения в текущем контексте наложения (это концепция трёхмерного расположения HTML-элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном. HTML-элементы занимают это место по порядку, основанному на атрибутах элемента) 2. Возможность создания локального контекста наложения.

Это приоритет наложения всех элементов, при котором явно не указано позиционирование.

С помощью директивы @supports можно указать проверяемое свойство. Если свойство поддерживается браузером, оно будет применено. Используется в Progressive enhancement (прогрессивное улучшение).

Если современное свойство не поддерживается старым браузером, то можно попробовать написать аналог. Пользоваться инструментами, помогающими обходить эти ограничения, например: — использовать библиотеки для определения браузеров и подгружать нужные стили — использовать @supports — использовать autoprefixer — использовать can i use — использовать подход Graceful degradation (подход в разработке сайтов, при котором некоторые свойства или элементы дизайна заменяются на аналогичные в старых версиях браузеров, которые не поддерживают все современные возможности) или Progressive enhancement.

Можно использовать комплекс методов, которые помогут учитывать и исправлять верстку в разных браузерах, например: — использовать autoprefixer — использовать reset или normalize — разделять стили для разных браузеров — использовать сторонние библиотеки — тестировать в BrowserStack — использовать CSS хаки.

Для всех свойств в CSS помимо стандартных значений используются глобальные ключевые слова: — initial — у каждого из свойств есть значения по умолчанию. Это свойство сбрасывает стили до этих самых свойств по умолчанию — inherit — все свойства делятся на наследуемые и не наследуемые. inherit позволяет указать, чтобы свойство наследовалось, чтобы не перечислять свойства каждому дочернему элементу. — unset — для наследуемых свойств применяет inherit, а для ненаследуемых — initial — revert — сбрасывает значения стилей свойства до указанного в браузере.

CSS функция, которая может получать значение любого атрибута элемента чтобы потом использовать это значение прямо в таблице стилей. Функция может работать с псевдоэлементами и выводится в content: attr(название атрибута).