В современном мире технологий фронт-энд разработчику нелегко найти работу и невозможно знать ответы на все вопросы, которые могут задать на собеседовании. Однако вы можете чувствовать себя более уверенно, если будете знать некоторые из рассмотренных ниже вопросов.
Для начала, вспомним, что CSS (Cascading Style Sheets) - это каскадные таблицы стилей, инструмент для описания внешнего вида веб-страницы. А теперь рассмотрим наиболее часто задаваемые вопросы по CSS.
Какие преимущества в использовании CSS
Основные преимущества использования CSS следующие:
- CSS позволяет представить один и тот же контент (веб-сайт, приложение...) для различных режимов и способов отображения, в том числе для мобильных устройств, планшетов и т.д.
- При эффективном использовании, стили будут храниться в кэше браузера, что позволяет использовать их на нескольких страницах без повторной их загрузки.
- CSS на столько эффективен в использовании, что путем внесения небольших изменений, можно полностью изменить внешний вид вашей веб-страницы. А при глобальных изменениях стилей все элементы на всех веб-страницах будут автоматически обновлены.
Что такое CSS спрайты
Спрайт - это файл-изображение, который включает в себя набор более мелких изображений для использования их на веб-странице. Спрайт используются для уменьшения нескольких запросов на сервер, которые могут быть вызваны появлением каждого из изображений отдельно, что замедляет загрузку страницы.
Спрайт обычно включает в себя набор используемых на сайте или странице иконок.
Что такое блочная модель в CSS и из каких свойств состоит
Это, пожалуй, самый часто задаваемый вопрос на собеседованиях.
Все предельно просто. Разметка макета состоит из контейнеров, которые представляют из себя блоки. Блочные элементы в основном служат для визуального отделения содержимого друг от друга и по-умолчанию занимают всю ширину родительского элемента. Кроме блочных элементов есть ещё строчные и строчно-блочные. Блочный элемент представляет из себя прямоугольник, состоящий из нескольких областей: контент, внутренний отступ, внешний отступ и рамка - они в комплексе и образуют блочную модель.
Визуально блочная модель выглядит так:
- content (контент) - эта область отвечает за контент, т.е. за все, что находится внутри блока - будь то текст или другие элементы
- padding (внутренний отступ) - эта область представляет собой пространство между содержимым элемента и его границей. Используя свойства padding-top, padding-right, padding-bottom и padding-left (или сокращенное для всех четырех - padding), это пространство может быть изменено
- border (рамка) - граница или рамка вокруг элемента. Свойства, влияющие на рамку: border-width, border-style, border-color и их сокращенный вариант - border
- margin (внешний отступ) - область вокруг элемента, задающая ему внешний отступ для других элементов. Подобно внутреннему отступу, может быть изменено свойством margin и его отдельными сторонами
Какие ограничения в CSS
Среди основных недостатков CSS:
- Ограничение поддержки браузерами - некоторые свойства не поддерживаются в старых браузерах. Для этого нам необходимо либо писать фаллбечные свойства (те, которые прочитает браузер, если не поймет основные), либо использовать полифиллы, либо проверять, поддерживается ли стиль, с помощью директивы @support - в общем, искать обходные пути и решения.
- Отсутствие селектора для родителя - в настоящее время с помощью CSS вы не можете выбрать родителя.
- Кроссбраузерные проблемы - некоторые свойства ведут себя по-разному в разных браузерах.
Что такое препроцессоры
Препроцессоры CSS - это инструменты, которые помогают нам расширить базовую функциональность CSS с помощью определенного языка сценариев. Это позволяет нам использовать сложный логический синтаксис: функции, примеси, вложения, наследование и многое другое, который будет скомпилирован в стандартный CSS.
Самый популярный препроцессор - SASS (Syntactically Awesome Style Sheet). SASS может быть написан с использованием двух разных синтаксисов: SASS или SCSS.
SASS синтаксис:
$font-color: #aaaccc
$bg-color: #eeefff
.element
color: $font-color
background: $bg-colorSCSS синтаксис:
$font-color: #aaaccc;
$bg-color: #eeefff;
.element {
color: $font-color;
background: $bg-color;
}Синтаксис SCSS считается более удобным и CSS-оподобным. Также среди отличий - разрешение файлов (.sass и .scss)
Препроцессор LESS (Leaner Style Sheets) легко интегрируется в проекты с использованием JavaScript. Синтаксис такой же, как у SCSS, но с некоторыми отличиями:
@font-color: #aaaccc;
@bg-color: #eeefff;
.element {
color: @font-color;
background: @bg-color;
}Препроцессор Stylus предлагает большую гибкость в своем синтаксисе, поддерживает нативный CSS, а также позволяет опускать скобки, двоеточия и точки с запятой. Спецсимволы для определения переменных не используются:
font-color = #aaaccc;
bg-color = #eeefff;
.element
color: font-color;
background: bg-color;На сколько важна кроссбраузерность
Очень важно тестировать веб-сайт в разных браузерах, когда вы его разрабатываете или вносите существенные изменения, ввиду особенностей их отображения разных элементов и свойств.
Также важно периодически повторять это тестирование, так как браузеры претерпевают множество обновлений и изменений и некоторые свойства CSS не поддерживаются во многих браузерах.
Вьюпорт и его размеры
Вьюпорт (Viewport) - область экрана, которую пользователь видит на своем устройстве. Другими словами - это активная область экрана. В CSS есть специальные единицы измерения, которые ссылаются на вьюпорт - это vh и vw. Они используются для указания размера величин в процентах относительно области просмотра.
Если высота браузера равна 800px, 1vh равна 8px, аналогично для ширины.
Разница между reset и normalize
Reset CSS - сброс CSS, направленный на удаление всех встроенных стилей браузера. Например: отступы, поля, размер шрифта всех элементов. Таким образом, вне зависимости от того, в каком браузере вы смотрите страницу, свойства, заданные браузерами, будут везде сброшены.
Normalize CSS - стремится сделать встроенные стили браузера консистентными для всех браузеров. Также исправляются ошибки для распространенных зависимостей браузера.
Комментарии (0)