CSS Theory Flashcards
Какие две главные проблемы производительности сайтов?
1) проблема скорости сети
2) проблема однопоточности браузеров
Из каких шагов состоит процесс отображения страницы?
1) Разбор HTML и построение DOM дерева
2) Получение внешних ресурсов в фоновом режиме
3) Разбор CSS и создание CSSOM
4) Выполнение JavaScript
5) Объединение DOM и CSSOM, для построения дерево рендеринга
6) Компоновка (layout) и отрисовка (paint) результата
Что может заблокировать загрузку страницы?
css блокирует рендеринг, но не парсинг
script без async или defer, блокирует парсинг
Что такое дерево рендеринга?
Это комбинирование DOM и CSSOM в дерево, содержащее все видимые узлы с их содержимым и вычисленными стилями
Для чего нужен атрибут async и defer?
script — отрисовка HTML блокируется, скрипт извлекается и выполняется немедленно, отрисовка HTML возобновляется после окончания выполнения скрипта
script async — скрипт будет извлечен и обработан параллельно с отрисовкой HTML, его выполнение закончится как только это будет возможно (обычно до того, как закончилась отрисовка HTML). Используйте async тогда, когда скрипт не зависит от других скриптов на странице, например для аналитики.
script defer — скрипт будет извлечен параллельно с отрисовкой HTML, его выполнение произойдет после того, как вся страница будет загружена. Если таких скриптов несколько, то каждый из них будет исполнятся в том порядке, в котором они расположены в документе. Если скрипту нужен полностью распарсеный DOM, то атрибут defer обеспечит уверенность в том, что на момент отработки скрипта весь HTML отрисован. Нет особой разницы со скриптами, расположенными перед тегом . Отложенный скрипт не должен содержать document.write.
Почему CSS блокирует рендеринг?
Потому, что до тех пор, пока весь CSS не будет проанализирован и не будет построен CSSOM, браузер не может знать, где и как разместить каждый элемент на экране
Как пометить важность ресурса для рендеринга?
rel=”preload”
В чем отличие фильтров от декоративных свойств?
Фильтры используют аппаратное ускорение, что улучшает производительность
Как применяются фильтры при загрузке страницы?
Применяются до отрисовки элемента и поэтому влияют на загрузку
Как задать диагональный градиент?
background-image: linear-gradient(to right top, yellow, green)
или
background-image: linear-gradient(45deg, yellow, green);
Отличие диагональных градиентов?
Заданные спомощью градусов, независят отформы контейнера, адиагональные градиенты зависят. Диагональные градиенты всегда остаются привязанными ксвоим углам
Что такое колорстоп в градиенте?
Место, где будет располагаться центральная (самая насыщенная) часть цвета.
Как выбрать пустые элементы?
:empty
Что такое приоритет стилей?
Правило применения стилей в зависимости от типа селектора
- элемент, псевдоэлемент
- класс, псевдокласс, атрибут
- id
- inline
- !important
Универсальный селектор (*), комбинаторы (+, >, ~, ‘ ‘) и отрицающий псевдокласс (:not()) не влияют на специфичность. (Однако селекторы, объявленные внутри :not(), влияют)
Что такое каскад в CSS?
Механизм языка, позволяющий применять к элементу более чем одно правило
Методы адаптивной верстки?
- задать viewport
- относительные ед.измерения
- media queries
- flex, grid
Что такое семантика?
Подход в написании html, использующий теги для пояснения содержания контента на странице.
Эта дополнительная информация помогает скринридерам, роботам лучше понять какой контент важен, какой является второстепенным и т.д.
Что такое vh и vw?
1vh = 1% height viewport
Что такое псевдокласс?
Ключевое слово, добавленное к селектору, которое определяет его особое состояние
Что такое псевдоэлемент?
Ключевое слово, добавляемое к селектору, которое позволяет стилизовать часть выбранного элемента не определенных в дереве, а также генерировать содержимое
Как сделать тень тексту?
text-shadow: 1px 1px 2px black, 0 0 1em red;
Что такое наследование в CSS?
Механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.
Как сделать тень блоку?
box-shadow: inset X Y Blur Radius Color;
Что такое vmax?
1% от max(width viewport, height viewport)
Что такое viewport?
Видимая область страницы, которая меняется при масштабировании
Методы кроссбраузерной верстки?
1) normalize.css
2) babel.js
3) autoprefixer, caniuse, hacks
Что такое Ajax?
Это процесса на стороне клиента, который извлекает данные с сервера и динамически обновляет DOM без полного обновления страницы
Отличие absolute от fixed?
Если у родителя static или родителя нет, то отсчет координат ведется от края окна браузера.
Привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
Как работает position sticky?
Как fixed в пределах контейнера, дальше как absolute; работает, только есть соседские элементы
Можно ли задать height, width, margin, padding и border строчному элементу?
Строчным элементам нельзя установить размеры (width и height), задать верхние и нижние margin отступы.
Для строчного элемента, размещенного на одной линии, можно использовать padding, margin-left и margin-right, border.
Назовите псевдоэлементы?
before, after, first-letter, first-line, selection, placeholder, selection
Назовите псевдоклассы?
lhav, child, input
Что такое контекст наложения?
Контекст наложения (stacking context) это концепция трехмерного расположения HTML элементов вдоль оси Z по отношению к пользователю
Какие свойства создают контекст наложения?
- является корневым элементом (HTML)
- absolute или relative с z-index значением отличным от “auto”,
- flex элемент с z-index отличным от “auto”, чей родительский элемент имеет свойство display: flex или inline-flex,
- opacity < 1.
transform отличный от “none”,
mix-blend-mode со значением отличным от “normal”,
filter со значением отличным от “none”,
isolation установленный в “isolate”, - fixed
Что такое специфичность в CSS?
В случае, если элемент обладает несколькими классами и селекторы по этим классам задают одно и то же свойство с разными значениями, более высоким приоритетом обладает то правило, которое расположено в CSS-коде ниже.
