Основы html/css Flashcards
Расскажи про относительные и абсолютные величины в CSS
Существует два типа величин используемых в CSS — относительные и абсолютные.
Абсолютные величины:
- Пиксели (px): Абсолютная единица измерения, используемая в CSS. 1 пиксель соответствует одному физическому пикселю на экране.
- Дюймы (in): Абсолютная единица измерения, которая равна 1/96 дюйма. *
- Сантиметры (cm): Абсолютная единица измерения, которая равна 2.54 сантиметра.
Относительные величины:
- Проценты (%): Относительная единица измерения, которая зависит от родительского контейнера или других свойств элемента.
-
EM и REM: Относительные единицы измерения, которые зависят от размера шрифта элемента или размера шрифта корневого элемента (
html). - Viewport Units: Относительные единицы измерения, которые зависят от размера экрана или области просмотра пользовательского браузера. Примеры:
-
vw(viewport width) - 1% от ширины окна просмотра -
vh(viewport height) - 1% от высоты окна просмотра -
vmin- 1% от наименьшей стороны окна просмотра -
vmax- 1% от наибольшей стороны окна просмотра
Flexbox
CSS Flexbox — это технология для создания гибких макетов за счёт различного размещения элементов на странице.
-
display: flex- определяет flex контейнер; inline или block в зависимости от заданного значения. Включает flex контекст для всех потомков первого уровня. -
flex-direction- устанавливает основную ось, таким образом определяя направление flex элементов, помещаемых в flex контейнер. Flexbox — это (помимо дополнительной упаковки) концепция однонаправленного макета. -
row(по умолчанию): слева направо в ltr; справа налево в rtl -
row-reverse: справа налево в ltr; слева направо в rtl -
column: так же, как иrow, но сверху вниз -
column-reverse: то же самое,row-reverse, но снизу вверх -
flex-wrap- По умолчанию гибкие элементы будут пытаться уместиться на одной строке. Вы можете изменить это и позволить элементам переходить на новую строку по мере необходимости с помощью этого свойства. -
nowrap(по умолчанию): все flex элементы будут в одной строке. -
wrap: flex-элементы будут перенесены на несколько строк сверху вниз. -
wrap-reverse: flex-элементы будут перенесены на несколько строк снизу вверх. -
flex-flow(Применяется к: родительскому элементу flex-контейнера) - сокращение дляflex-directionиflex-wrapсвойств:flex-flow: ||. -
justify-content- определяет выравнивание вдоль главной оси. Есть также два дополнительных ключевых слова, которые вы можете связать с этими значениями:safeиunsafe. Использованиеsafeгарантирует, что элементы не будут отображаться за пределами экрана таким образом, чтобы содержимое не могло быть прокручено (это называется «потеря данных»). -
flex-start(по умолчанию): элементы сдвинуты в началоflex-directionнаправления. -
flex-end: элементы сдвинуты ближе к концу flex направления. -
center: элементы центрированы вдоль линии. -
space-between: элементы равномерно распределены по линии; первый элемент находится в начале строки, последний элемент в конце строки. -
space-around: элементы равномерно распределены по линии с одинаковым пространством вокруг них. Обратите внимание, что визуально пространства могут различаться, так как все элементы имеют одинаковое пространство с обеих сторон, а первый и последний элементы имеют половину пространства. -
space-evenly: элементы распределяются таким образом, чтобы расстояние между любыми двумя элементами (и расстояние до краев) было одинаковым. -
start: элементы сдвинуты к началу writing-mode направления. -
end: элементы сдвинуты в конце writing-mode направления. -
left: элементы сдвинуты по направлению к левому краю контейнера, если это не имеет смыслаflex-direction, тогда он ведет себя какstart. -
right: элементы сдвинуты по направлению к правому краю контейнера, если это не имеет смыслаflex-direction, тогда он ведет себя какstart. -
align-items- Это свойство определяет поведение по умолчанию того, как flex элементы располагаются вдоль поперечной оси на текущей линии. Тут тоже могут быть использованыsafeиunsafe. -
stretch(по умолчанию): растягивать, чтобы заполнить контейнер (все еще соблюдаютсяmin-width/max-width). -
flex-start/start/self-start: элементы размещаются в начале поперечной оси. Разница между ними невелика и заключается в соблюденииflex-directionправил илиwriting-modeправил. -
flex-end/end/self-end: элементы располагаются в конце поперечной оси. Разница опять-таки тонкая и заключается в соблюденииflex-directionилиwriting-modeправил. -
center: элементы центрированы по поперечной оси. -
baseline: элементы выровнены по их базовой линии. -
align-content- Это свойство выравнивает линии в пределах flex контейнера, когда есть дополнительное пространство на поперечной оси, подобно тому, какjustify-contentвыравнивает отдельные элементы в пределах главной оси. -
flex-start/start: элементы сдвинуты в начало контейнера. Более поддерживаемыйflex-startиспользуетflex-direction, в то время какstartиспользуетwriting-modeнаправление. -
flex-end/end: элементы сдвинуты в конец контейнера. Более поддерживаемыйflex-endиспользуетflex-direction, в то время какendиспользуетwriting-modeнаправление. -
center: элементы выровнены по центру в контейнере. -
space-between: элементы равномерно распределены; первая строка находится в начале контейнера, а последняя — в конце. -
space-around: элементы равномерно распределены с равным пространством вокруг каждой строки. -
space-evenly: элементы распределены равномерно, вокруг них одинаковое пространство. -
stretch(по умолчанию): линии растягиваются, чтобы занять оставшееся пространство. -
align-self- Это свойство позволяет переопределить выравнивание по умолчанию (или указанное с помощьюalign-items) для отдельных элементов flex. -
flex-basis- Это свойство определяет размер элемента по умолчанию перед распределением оставшегося пространства. Это может быть длина (например, 20%, 5rem и т.д.) Или ключевое слово. Ключевое слово auto означает «смотри на мое width или height свойство». Ключевое слово content означает «размер на основе содержимого элемента» — это ключевое слово все еще не очень хорошо поддерживается, так что трудно проверить что для него используется max-content, min-content или fit-content. Если установлено значение 0, дополнительное пространство вокруг содержимого не учитывается. Если установлено значение auto, дополнительное пространство распределяется в зависимости от его flex-grow значения. -
flex-grow: определяет способность flex элемента растягиваться в случае необходимости. Оно принимает значение от нуля, которое служит пропорцией. Если для всех элементовflex-growустановлено значение 1, оставшееся пространство в контейнере будет равномерно распределено между всеми дочерними элементами. Если один из дочерних элементов имеет значение 2, этот элемент займет в два раза больше места, чем остальные (или попытается, по крайней мере). -
flex-shrink: Это свойство определяет способность гибкого элемента сжиматься при необходимости. -
flex: Это сокращение для использованияflex-grow,flex-shrinkиflex-basisвместе. Второй и третий параметры (flex-shrinkиflex-basis) являются необязательными.
Grid
CSS Grid - это мощная система разметки, позволяющая создавать гибкие и сложные макеты на веб-странице. Она основана на концепции сетчатки (grid), где элементы располагаются в ячейках, определенных с помощью сетки.
Для работы с CSS Grid используются следующие свойства:
-
display: grid;- задает элементу контейнерную сетку. -
grid-template-columns:- определяет количество и размеры столбцов в сетке. Можно указать значение в пикселях, процентах или других единицах измерения. Например,grid-template-columns: 1fr 2fr 1fr;создаст три столбца, из которых средний будет занимать в два раза больше места. -
grid-template-rows:- определяет количество и размеры строк в сетке. Работает аналогичноgrid-template-columns, но применяется к строкам. -
grid-gap:- определяет пространство между ячейками сетки. Можно указать значение в пикселях, процентах или других единицах измерения. Например,grid-gap: 10px;создаст промежуток шириной 10 пикселей между ячейками. -
column-gapиспользуется для добавления отступа между колонками. -
row-gapиспользуется для добавления отступов между рядами. -
grid-template-areas:- задает расположение ячеек с помощью именованных областей. Например,
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
-
grid-column-start:иgrid-column-end:- определяют начальную и конечную позиции столбцов для элемента. Можно указывать числовое значение или ключевое словоspanс числом, указывающим количество ячеек сетки. -
grid-row-start:иgrid-row-end:- определяют начальную и конечную позиции строк для элемента. Работают аналогичноgrid-column-startиgrid-column-end. -
justify-items:- выравнивает содержимое ячеек вдоль оси столбцов. Можно использовать значенияstart,end,centerи другие. -
align-items:- выравнивает содержимое ячеек вдоль оси строк. Можно использовать значенияstart,end,centerи другие. -
justify-content:- выравнивает сетку вдоль оси столбцов. Можно использовать значенияstart,end,center,space-aroundи другие. -
align-content:- выравнивает сетку вдоль оси строк. Можно использовать значенияstart,end,center,space-aroundи другие. -
justify-self:- выравнивает содержимое отдельного элемента вдоль оси столбцов. Можно использовать значенияstart,end,centerи другие для каждого элемента в сетке отдельно. -
align-self:- выравнивает содержимое отдельного элемента вдоль оси строк. Можно использовать значенияstart,end,centerи другие для каждого элемента в сетке отдельно. -
grid-auto-columns:- определяет размер автоматически созданных столбцов в сетке. -
grid-auto-rows:- определяет размер автоматически созданных строк в сетке. -
grid-auto-flow:- определяет, как новые элементы будут размещаться на сетке при превышении заданных столбцов и строк. Можно использовать значенияrow,columnиdense.
Блоковая модель
Boxmodel
Блоковая модель CSS — это, по сути, блок, который окружает каждый элемент HTML. Он состоит из: полей, границ, отступов и фактического содержимого. Она позволяет нам добавлять границы вокруг элементов и определять пространство между элементами. Когда вы устанавливаете свойства ширины и высоты элемента с помощью CSS, вы просто устанавливаете ширину и высоту области содержимого . Чтобы рассчитать полный размер элемента, вы также должны добавить отступы, границы и поля. К примеру:
320 пикселей (ширина)
+ 20 пикселей (левый + правый отступ)
+ 10 пикселей ( левый + правый край) + 0 пикселей
(левый + правый край)
= 350 пикселей
Веса селекторов
Все CSS-селекторы имеют свой вес, который определяет как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу. Иногда это может создавать трудности, когда свойство, объявленное ниже в коде, перекрывается тем, что объявлено выше, потому что селектор первого более специфичен (имеет больший вес).
Специфичность селектора рассчитывается по 4-м позициям. Для каждого из них подсчитывается количество подходящих элементов в селекторе, и это число помещается в соответствующую позицию.
Вес селекторов (по убыванию):style="" - 1,0,0,0 - У стилей, заданных в атрибуте style, на первой позиции будет единица — 1,0,0,0. Это самая высокая специфичность, которая перевешивает свойства, заданные другими способами. Переопределить стили, заданные в style, можно дописав !important к значению свойства в таблице стилей.#id - 0,1,0,0.class - 0,0,1,0[attr=value] - 0,0,1,0<li> - 0,0,0,1* - 0,0,0,0
Значения атрибута display
Значение none
Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.
Значение block
Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float).
Блок стремится расшириться на всю доступную ширину.
Можно указать ширину и высоту явно.
Блоки прилегают друг к другу вплотную, если у них нет margin.
Это значение display многие элементы имеют по умолчанию: <div>, заголовок <h1>, параграф <p>.
Значение inline
Элементы располагаются на той же строке, последовательно.
Ширина и высота элемента определяются по содержимому. Поменять их нельзя.
Например, инлайновые элементы по умолчанию: <span>, <a>.
Содержимое инлайн-элемента может переноситься на другую строку.
При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.
Это проявляется, например, при назначении фона.
Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки</a></span>
Значение inline-block
Это значение – означает элемент, который продолжает находиться в строке (inline), но при этом может иметь важные свойства блока.
Как и инлайн-элемент:
Располагается в строке.
Размер устанавливается по содержимому.
Во всём остальном – это блок, то есть:
Элемент всегда прямоугольный.
Работают свойства width/height.
Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.
Значения table-
Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display.
Для таблицы целиком table, для строки – table-row, для ячейки – table-cell и т.д.
list-item
Этот display по умолчанию используется для элементов списка. Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами
run-in
Если после run-in идёт block, то run-in становится его первым инлайн-элементом, то есть отображается в начале block.
flex и grid
Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке.
Каскад и наследование в CSS
Cascade and Inheritance
CSS (Cascading Style Sheets) означает Каскадные Таблицы Стилей. Каскад и тесно связанная концепция специфичности — это механизмы, которые контролируют, какое именно правило применяется, когда имеется такой конфликт. Каскад таблицы стилей, если говорить упрощённо, означает, что порядок следования правил в CSS имеет значение; когда применимы два правила, имеющие одинаковую специфичность, используется то, которое идёт в CSS последним.
Вот три фактора, перечисленные в порядке возрастания важности. Следующий отменяет предыдущий:
- Порядок следования
- Специфичность
- Важность
!important- используется, чтобы сделать конкретное свойство и значение самыми специфичными, таким образом переопределяя нормальные правила каскада.
Специфичность и наследование
Специфичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но могут быть применены к одному и тому же элементу. Различные типы селекторов (селекторы элементов h1, селекторы классов, селекторы идентификаторов и т.д.) имеют разную степень влияния на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы, тем меньше его специфичность или конкретность.
Также значимой является концепция наследования, которая заключается в том, что некоторые свойства CSS наследуют значения, установленные для родительского элемента текущего элемента, а некоторые свойства не наследуются. Это может привести к поведению, которое вы, возможно, не ожидаете. Например, свойство font-family наследуется, а width не наследуется.
Контроль наследования CSS
CSS предоставляет четыре специальных универсальных значения свойства для контроля наследования. Каждое свойство CSS может принимать эти значения:
-
inherit- Устанавливает значение свойства для элемента таким же, как у его родительского элемента. Фактически, это включает наследование. -
initial- Устанавливает значение свойства для выбранного элемента равным исходному значению этого свойства (в соответствии с настройками браузера по умолчанию). Если в таблице стилей браузера отсутствует значение этого свойства, оно наследуется естественным образом. -
unset- Возвращает свойству свое естественное значение. Если свойство наследуется естественным образом, оно действует какinherit, иначе оно действует какinitial. - Существует также более новое значение
revert, которое имеет ограниченную поддержку браузерами.
Позиционирование: поток документа, свойство position, Overflow и z-index
Поток документа (flow)
Поток - это принцип организации элементов на странице при отсутствии стилей: если мы напишем HTML и не напишем CSS, то отображение в браузере будет предсказуемо благодаря тому, что мы абсолютно точно знаем, как браузер располагает элементы в потоке. Если вообще не применять никаких стилей, браузер формирует из элементов нормальный поток. Поведение блочных элементов в нормальном потоке отличается от поведения строчных.
Правила расположения строчных и блочных элементов в нормальном потоке называются контекстом форматирования. Блочные элементы участвуют в формировании блочного контекста форматирования. Строчные элементы формируют строчный контекст форматирования. Расположение элементов в контексте форматирования зависит от направления письма для конкретного языка.
- Блочные элементы в нормальном потоке располагаются друг под другом, всегда занимая всю доступную ширину родителя. Высота блочного элемента по умолчанию равна высоте его содержимого.
- Строчные элементы располагаются друг за другом, как слова в предложении. В зависимости от направления письма в конкретном языке элементы могут располагаться слева направо (например, в русском языке), справа налево (как, например, в иврите) и даже сверху вниз (как иероглифы и знаки слоговых азбук в японском вертикальном письме). Ширина и высота строчного элемента равна ширине и высоте содержимого. В отличие от блочного элемента, мы не можем управлять шириной и высотой строчного элемента через CSS. Несколько строчных элементов будут стремиться уместиться на одной строке, насколько хватает ширины родителя. Если ширины родителя не хватает, то лишний текст строчного элемента переносится на следующую строку.
Все элементы по умолчанию находятся в нормальном потоке. Но это поведение можно поменять при помощи некоторых CSS-свойств. При изменении значений этих свойств элемент перестаёт взаимодействовать с остальными блоками в потоке. Говорят, что он «вышел из потока». Элементы, вышедшие из потока, создают внутри себя своего рода мини-поток -их дочерние элементы будут подчиняться правилам взаимодействия в потоке в пределах родителя.
Обтекание при помощи float
Когда мы делаем элемент плавающим, он перестаёт взаимодействовать с другими элементами блочного контекста. При этом со строчным контекстом наш плавающий блок продолжает взаимодействовать. Текстовые элементы обтекают такой блок с одной из сторон.
Позиционирование элемента при помощи position
Свойство position в CSS может принимать пять значений:
- absolute удаляет элемент из общего потока документа. Окружающие элементы сдвигаются на его место, будто его не существует. Такие элементы позиционируются относительно ближайшего родительского элемента, для которого задано позиционирование отличное от static. Если такого элемента нет, то элемент позиционируется относительно основного документа.
- relative - относительно позиционированные элементы, размещаются на основе своей же позиции, обычный сдвиг относительно своего нормального расположения. Элементы с относительным позиционированием, взяты из нормального потока элемента, но по-прежнему оказывают влияние на расположение соседних элементов, которые ведут себя так, что исходный элемент всё ещё находится в потоке документа.
- fixed -элемент с фиксированным позиционированием всегда располагается относительно окна браузера, родительские элементы при этом игнорируются. Фиксированные элементы зафиксированы на странице. Они не смещаются при её прокручивании.
- static используется по умолчанию, элемент с позиционированием static находится в общем потоке документа
- inherit - элемент использует тоже самое значение, что и родительский элемент.
Расположение элемента с абсолютным позиционированием, реализуется с помощью свойств top, left, right и bottom.
Z-index
Страница сайта двумерна. У неё есть ширина и высота. Z-index добавляет третье измерение, глубину. Свойство z-index может быть применено только для элементов с установленным свойством position. Чем выше этот индекс тем выше на странице расположен элемент. С помощью него мы можем добиться чтобы один элемент располагался поверх другого. По умолчанию, его значение - ноль. Отрицательные значения также допустимы.
Overflow
Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
- visible - Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
- hidden - Отображается только область внутри элемента, остальное будет скрыто.
- scroll - Всегда добавляются полосы прокрутки.
- auto - Полосы прокрутки добавляются только при необходимости.
- inherit - Наследует значение родителя.
Псевдокласс и псевдоэлемент
Псевдокласс — это селектор, который выбирает элементы, находящиеся в специфическом состоянии, например, они являются первым элементом своего типа, или на них наведён указатель мыши.
Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия.
Существует пара специальных псевдоэлементов, которые используются вместе со свойством content для вставки содержимого в документ с помощью CSS.
Вы можете использовать их для вставки строки текста, как в приведённом ниже живом примере. Попробуйте изменить текстовое значение свойства content и вы увидите, как изменится результат. Можете также изменить псевдоэлемент ::before на ::after и увидите, что текст вставлен в конце элемента, а не в начале.
Псевдоклассы:
- :hover - применяется при наведении курсора на элемент.
- :active - применяется, когда элемент находится в активном состоянии (нажатие кнопки мыши на него).
- :focus - применяется, когда элемент находится в фокусе (например, после клика на него или при использовании клавиатурной навигации).
- :visited - применяется к посещенным ссылкам.
- :first-child - применяется к первому дочернему элементу родителя.
- :last-child - применяется к последнему дочернему элементу родителя.
- :nth-child(n) - применяется к элементам, которые являются n-ными дочерними элементами родителя. Может использоваться для создания шаблонов сетки и других паттернов.
- :nth-of-type(n) - применяется к каждому элементу, который является n-ым элементом своего типа (таким же тегом).
- :not(selector) - исключает элементы, которые соответствуют указанному селектору.
Псевдоэлементы:
- ::before - добавляет псевдоэлемент перед содержимым выбранного элемента.
- ::after - добавляет псевдоэлемент после содержимого выбранного элемента.
- ::first-line - применяется к первой строке текста внутри элемента.
- ::first-letter - применяется к первой букве текста внутри элемента.
- ::selection - применяется к выделенному пользователем тексту на странице.
- ::placeholder - применяется к текстовому заполнителю внутри элемента формы (input, textarea и т.д.).
Для чего нужны CSS-переменные? Приведите несколько примеров использования.
CSS-переменные (или Custom Properties) являются механизмом в CSS, который позволяет объявлять и использовать переменные для хранения значений, таких как цвета, шрифты, размеры и т.д. Они обеспечивают гибкость и переиспользование кода стилей. Вот несколько примеров использования CSS-переменных:
- Управление цветовой палитрой: CSS-переменные позволяют задать основные цвета и использовать их во всем документе, что упрощает изменение цветовой схемы в одном месте. Например:
:root {
--primary-color: #FF0000;
--secondary-color: #00FF00;
}
.header {
background-color: var(--primary-color);
}
.button {
background-color: var(--secondary-color);
}
- Использование для медиа-запросов: CSS-переменные также могут быть использованы в медиа-запросах, что позволяет задавать условия адаптивности с использованием переменных. Например:
:root {
--breakpoint: 768px;
}
.container {
width: 100%;
}
@media (min-width: var(--breakpoint)) {
.container {
max-width: 960px;
}
}
- Управление шрифтами: CSS-переменные могут быть использованы для установки и переиспользования значений шрифтов в различных стилях текста. Например:
:root {
--font-primary: 'Arial', sans-serif;
--font-secondary: 'Verdana', sans-serif;
}
.body {
font-family: var(--font-primary);
}
.heading {
font-family: var(--font-secondary);
}
- Анимация и переходы: CSS-переменные могут использоваться для задания времени или задержки в анимации или переходе. Например:
:root {
--transition-duration: 0.3s;
}
.button {
transition-duration: var(--transition-duration);
}
Что произойдет при добавлении следующего селектора? * {Box-sizing: border-box; }
Когда вы добавите следующий селектор * {box-sizing: border-box;}, это применит свойство box-sizing: border-box; ко всем элементам на странице. Это изменит поведение видимого размера элементов, поскольку свойство box-sizing: border-box; заставляет браузер учитывать границы и отступы элемента в его вычисленной ширине и высоте.
Вместо использования значений по умолчанию (content-box), которые добавляют границы и отступы элементов к его вычисленным значениям ширины и высоты, свойство box-sizing: border-box; заставляет браузер учитывать эти значения при вычислении размеров элементов. Это может быть полезным, особенно при разработке макетов и установке размеров элементов с использованием CSS, поскольку позволяет более просто и предсказуемо управлять размерами элементов.
Как адаптировать страницу для печати?
Для адаптации страницы для печати можно использовать следующие подходы и CSS-правила:
- Media Queries: Используйте медиа-запросы (
@media print) для указания стилей, применяемых только при печати. Например:
@media print {
/* Стили для печати здесь */
}
- Скрытие элементов: Используйте свойство
display: noneилиvisibility: hiddenдля скрытия элементов, которые не нужно отображать при печати. Например:
@media print {
.hide-print {
display: none;
}
}
- Изменение стилей: Измените стили элементов для оптимального отображения при печати. Например, установите ширину элементов, чтобы они соответствовали размеру страницы, или скройте фоновые изображения, чтобы сохранить черно-белый формат.
- Задание размеров страницы: Используйте свойство
@pageдля определения размеров страницы и ориентации печати. Например:
@page {
size: A4; /* Задание размера страницы */
margin: 2cm; /* Задание полей страницы */
}
- Оптимизация содержимого: Избегайте изображений с высоким разрешением и лишних элементов для улучшения читаемости и экономии бумаги.
Опишите особенности кастомизации стилей стандартных элементов форм.
- Установка пользовательских стилей: Вы можете использовать CSS-правила для выбора стандартных элементов форм и задания пользовательских стилей. Вы можете изменить размеры, цвета, шрифты, фоны и другие свойства элементов форм, чтобы они соответствовали дизайну вашего веб-сайта.
- Переопределение псевдоклассов: С помощью псевдоклассов, таких как
:hover,:activeи:focus, вы можете изменить стили элементов форм в различных состояниях. Например, вы можете изменить цвет кнопки при наведении на нее или добавить рамку, когда элемент формы получает фокус. - Указывание псевдоэлементов: С помощью псевдоэлементов, таких как
::beforeи::after, вы можете добавить дополнительные элементы к стандартным элементам форм. Например, вы можете добавить значок или иконку рядом с полем ввода или создать кастомные фоновые эффекты. - Настройка различных типов элементов форм: Каждый тип стандартного элемента формы имеет свои уникальные стили. Например, для текстового поля вы можете настроить высоту, ширину, границы и фон, а для кнопки - фон, шрифт и цвет текста.
- Использование псевдокласса
:invalid: Псевдокласс:invalidпозволяет стилизовать элементы формы, когда они содержат недопустимые данные или не проходят валидацию. Например, вы можете установить красную рамку вокруг неверно заполненных полей или добавить сообщение об ошибке.
Что такое progressive рендеринг? Какие подходы в нем используются?
Progressive рендеринг - это стратегия отображения содержимого страницы по мере его загрузки, позволяющая пользователям видеть и взаимодействовать с контентом как можно быстрее. Она направлена на улучшение восприятия времени загрузки и увеличение отзывчивости пользовательского интерфейса. Вот некоторые подходы, используемые в progressive рендеринге:
- Постепенная загрузка (Lazy Loading): Загружайте изображения, видео и другие ресурсы только тогда, когда они становятся видимыми в окне просмотра. Это может быть особенно полезно при работе с большими изображениями или медиафайлами, которые могут существенно замедлить время загрузки страницы.
- Вертикальное разделение задач (Vertical Splitting): Разделите задачи на несколько этапов и сначала отобразите основной контент страницы, а затем загружайте и обрабатывайте дополнительные компоненты или модули. Это помогает ускорить первоначальную отрисовку страницы и дает пользователям возможность начать просмотр контента сразу же.
- Постоянная загрузка (Progressive Enhancement): Загружайте основной контент и функциональность в первую очередь, а после этого постепенно добавляйте дополнительные улучшения и оптимизации. Такой подход позволяет обеспечить базовый функционал для всех пользователей и постепенно улучшать его для тех, кто может использовать более современные возможности.
- Полная загрузка критического содержимого (Critical Rendering Path): Сосредоточьтесь на загрузке и отображении “критического” или важного для первоначального восприятия содержимого страницы, такого как текст, стили, шрифты. Оптимизируйте эти ресурсы, чтобы они максимально быстро отображались пользователю.
- Кэширование и предзагрузка (Caching and Prefetching): Используйте механизмы кэширования, чтобы сохранить ресурсы на стороне клиента и предзагружать необходимые для последующих этапов страницы.
Назовите популярные CSS-методологии и их различия.
Существует несколько популярных CSS-методологий, разработанных для более эффективной и организованной разработки стилей. Вот некоторые из них и их основные различия:
- БЭМ (Блок, Элемент, Модификатор): БЭМ является одной из самых популярных методологий. Он использует структурированный подход к именованию классов, основанный на иерархии Блок-Элемент-Модификатор. БЭМ способствует модульности и переиспользованию кода.
- SMACSS (Scalable and Modular Architecture for CSS): SMACSS призывает к созданию гибкой, масштабируемой и модульной архитектуры CSS. Он рекомендует разделение стилей на базовые стили, стили масштабируемых компонентов, макеты, состояния и темы, чтобы обеспечить четкую организацию стилей.
- OOCSS (Object-Oriented CSS): OOCSS подразумевает создание стилей, которые могут быть переиспользованы на разных элементах страницы. Он способствует созданию независимых компонентов и повторному использованию кода, чтобы упростить разработку и поддержку CSS.
- Atomic CSS: Atomic CSS предлагает подход, в котором стили представлены в виде небольших, автономных классов, которые применяются для конкретных стилей или свойств. Он способствует созданию модульных стилей и быстрой разработке CSS.
- CSS-in-JS: CSS-in-JS - это подход, при котором CSS находится внутри компонентов JavaScript. Он позволяет создавать компоненты, в которых стили могут быть написаны непосредственно внутри JavaScript-файлов или использовать специальные инструменты для компиляции.
Какие форматы изображений поддерживают анимацию?
- GIF (Graphics Interchange Format): GIF - это старый и широко поддерживаемый формат изображений, который поддерживает анимацию. Он использует последовательность изображений, называемых кадрами, отображаемых в определенной последовательности для создания анимационного эффекта.
- APNG (Animated Portable Network Graphics): APNG - это формат изображений, основанный на PNG, который поддерживает анимацию. В отличие от GIF, APNG позволяет более высокое качество изображений и поддерживает прозрачность.
- WebP: Формат WebP, разработанный Google, также поддерживает анимацию. Он обеспечивает отличное сжатие изображений и поддерживает прозрачность, что делает его популярным форматом для веб-анимаций.
- SVG (Scalable Vector Graphics): SVG - это векторный формат изображений, который также может использоваться для анимации. В SVG анимация создается с помощью CSS или JavaScript, что позволяет создавать сложные и интерактивные анимации.
Обратите внимание, что поддержка форматов изображений с анимацией может различаться в разных браузерах. Поэтому при использовании анимации изображений в веб-проекте рекомендуется проверить поддержку форматов и обеспечить альтернативные варианты для старых или несовместимых браузеров.
Как отследить прогресс / окончание CSS @keyframes анимаций или плавных переходов, реализованных с помощью transition, в JS?
Для отслеживания прогресса или окончания CSS анимации или плавного перехода можно использовать JavaScript и следующие подходы:
- Event Listeners: Добавьте слушатели событий для элемента, на котором происходит анимация или плавный переход, и отслеживайте соответствующие события. Например, вы можете использовать событие
animationstart,animationend,transitionstartиtransitionendдля отслеживания начала и окончания анимаций и плавных переходов.
const element = document.getElementById('myElement');
element.addEventListener('animationend', function() {
console.log('Анимация окончена');
});
- Проверка стилей: Вы можете проверять стили элемента с помощью JavaScript для определения статуса анимации или плавного перехода. Например, вы можете использовать
getComputedStyle()для получения текущего значения свойства, чтобы узнать, завершена ли анимация или плавный переход.
const element = document.getElementById('myElement');
const computedStyle = window.getComputedStyle(element);
const animationDuration = computedStyle.getPropertyValue('animation-duration');
if (animationDuration !== '0s') {
console.log('Анимация в процессе');
} else {
console.log('Анимация окончена');
}
- Callback функции: Если вы используете JavaScript-библиотеку или фреймворк для управления анимацией, они могут предоставлять callback функции для отслеживания прогресса или окончания анимации или плавного перехода. Например, в библиотеке JQuery вы можете использовать метод
.animate()с передачей callback функции.
$('#myElement').animate({
left: '300px'
}, 1000, function() {
console.log('Анимация окончена');
});
Какие CSS-свойства могут быть обработаны непосредственно через GPU? Что такое композитные слои и почему большое их количество может привести к аварийному завершению работы браузера на мобильных устройствах?
CSS-свойства, которые могут быть обработаны напрямую через GPU (графический процессор), включают:
-
transform: свойствоtransformпозволяет применять 2D и 3D трансформации к элементам, такие как перемещение (translate), масштабирование (scale), поворот (rotate) и др. -
opacity: свойствоopacityиспользуется для изменения прозрачности элемента. Этот эффект также может быть обработан на GPU. -
filter: свойствоfilterпозволяет применять эффекты, такие как размытие (blur), насыщенность (saturate), яркость (brightness) и др., которые также могут обрабатываться на GPU.
Композитные слои (Composite Layers) - это механизм, используемый браузером для улучшения производительности рендеринга CSS. Когда элемент имеет композитные слои, он обрабатывается непосредственно GPU. Каждый слой рендерится отдельно и может быть перепрорисован только при необходимости обновления.
Однако, большое количество композитных слоев может привести к перегрузке и низкой производительности браузера, особенно на мобильных устройствах с ограниченными ресурсами. Каждый слой требует памяти и обработки со стороны GPU, поэтому избыточное использование композитных слоев может приводить к проблемам с производительностью и деградации производительности. Рекомендуется минимизировать количество композитных слоев и оптимизировать использование анимаций и эффектов для улучшения производительности на мобильных устройствах.
Опишите способы оптимизации SVG-файлов.
Оптимизация SVG-файлов может повысить производительность и улучшить загрузку веб-страниц. Ниже перечислены несколько способов оптимизации SVG-файлов:
- Удаление ненужных элементов и атрибутов: Избавьтесь от ненужных элементов, групп и атрибутов в SVG-файле, оставив только необходимую информацию.
- Минификация кода: Удалите лишние пробелы, переносы строк и комментарии в SVG-файле с помощью специальных инструментов или онлайн-сервисов.
- Оптимизация путей: Если SVG-файл содержит сложные пути, попробуйте упростить их с помощью оптимизационных алгоритмов, таких как уплотнение (simplification) или сглаживание (smoothing).
- Атрибуты viewbox и preserveAspectRatio: Используйте атрибуты viewbox и preserveAspectRatio для масштабирования SVG-файла, чтобы он должным образом адаптировался к разным размерам контейнера.
- Компрессия: Применяйте сжатие SVG-файла, используя методы сжатия, такие как gzip или deflate, для уменьшения размера файла без потери качества.
- Предзагрузка и кэширование: Если SVG-файл используется на нескольких страницах, рекомендуется его предзагружать и кэшировать, чтобы избежать лишних запросов к серверу при переходе между страницами.
- Использование символов и ссылок: Если в SVG-файле повторяются элементы, такие как иконки или логотипы, рассмотрите возможность использования символьных элементов или ссылок, чтобы уменьшить размер файла и повысить эффективность его использования.
- Проверка совместимости: Проверьте правильность отображения SVG-файла в разных браузерах и на разных устройствах, чтобы убедиться, что он отображается корректно и без ошибок.
Что такое ложное жирное или ложное курсивное (Faux) начертания шрифтов?
Ложное жирное или ложное курсивное (Faux) начертание шрифтов - это эффект, при котором применяется стилистическое изменение к тексту, чтобы он выглядел жирнее или курсивнее без наличия соответствующих начертаний в самом шрифте.
Когда браузеру или системе не удается найти конкретное начертание (жирное или курсивное) для шрифта, он может применить ложное начертание, генерируя его на основе обычного начертания. Это может быть полезно в ситуациях, когда требуется быстрое применение эффекта жирного или курсивного текста, но нет доступного шрифта с соответствующим начертанием.
Однако, ложные начертания имеют свои ограничения в сравнении с настоящими начертаниями шрифтов. Они не могут точно воспроизвести уникальные дизайнерские особенности и могут отличаться от настоящих начертаний шрифта по внешнему виду. Кроме того, они могут сказываться на доступности и поддержке для использования программами чтения с экрана или другими вспомогательными технологиями.
Поэтому, хотя ложные начертания могут быть полезны для быстрого создания визуальных эффектов текста, рекомендуется использовать настоящие начертания шрифтов, когда они доступны, чтобы обеспечить лучшую качественную и стилистическую согласованность текста на веб-страницах или в дизайне.
Что такое #shadow-root в инспекторе HTML-страницы?
shadow-root (тень) - это псевдоэлемент, который представляет собой отдельное внутреннее дерево HTML-элемента, созданного с использованием технологии Shadow DOM. Shadow DOM позволяет создавать изолированные компоненты с собственным DOM-деревом, стилями и поведением, которые могут быть встроены в основное дерево документа.
Когда элемент имеет #shadow-root, то в инспекторе HTML-страницы вы можете раскрыть этот псевдоэлемент, чтобы увидеть его внутреннюю структуру, включая HTML, CSS и JavaScript-код, связанный с этим компонентом. Вы также можете отладить код, связанный с теневым DOM-деревом, и внести изменения в стили и поведение компонента через инструменты разработчика.
Тень может быть создана с помощью JavaScript-кода или атрибута shadowRoot, и может быть использована для создания настраиваемых элементов, инкапсулирующих свои стили и функциональность. Они особенно полезны при создании веб-компонентов, где каждый компонент может иметь свой собственный Shadow DOM, который не будет взаимодействовать с остальной частью страницы.
Что такое контекст отображения canvas? Какие существуют типы контекста для рендеринга двумерной и трехмерной графики?
Контекст отображения (rendering context) в элементе canvas в HTML является областью рисования для рендеринга двумерной или трехмерной графики. Он предоставляет API, которое позволяет программно создавать и управлять изображениями, фигурами, текстом и другими элементами на холсте.
Существуют различные типы контекстов для рендеринга двумерной и трехмерной графики:
- Контекст 2D (2D Context): Это стандартный контекст отображения, доступный по умолчанию. Он предоставляет методы для рисования путей, прямоугольников, текста, изображений и других элементов двумерной графики.
- WebGL (Web Graphics Library): WebGL является контекстом 3D-рендеринга, основанным на спецификации WebGL API. Он позволяет создавать и управлять трехмерной графикой с использованием графического процессора (GPU) и шейдеров.
- Контекст OffscreenCanvas: Это контекст отображения, который позволяет рендерить графику вне области просмотра пользователя. Он может быть использован для создания изображений в памяти или для рендеринга на сервере.
Каждый тип контекста имеет свои методы и функциональность, специфичные для рендеринга соответствующего типа графики. При разработке веб-приложений вы можете выбрать наиболее подходящий контекст в зависимости от того, какой тип графики требуется отрисовать в элементе canvas.
Что такое блочная модель CSS?
Блочная модель CSS - это концепция, определяющая, как элементы веб-страницы отображаются и взаимодействуют с другими элементами на основе своих размеров и расположения. Она включает в себя следующие компоненты:
- Контент (content): Это содержимое элемента, такое как текст, изображения или другие дочерние элементы.
- Заполнитель (padding): Это пространство, расположенное между контентом и границами элемента. Значение заполнения может быть задано с помощью свойств
padding-top,padding-right,padding-bottomиpadding-left. - Граница (border): Граница элемента, которая окружает его контент и заполнитель. Значение границы может быть задано с помощью свойств
border-top,border-right,border-bottomиborder-left. - Отступ (margin): Это пространство вокруг границы элемента. Значение отступа может быть задано с помощью свойств
margin-top,margin-right,margin-bottomиmargin-left.
Каждый из этих компонентов влияет на размеры элемента и его внешний вид на веб-странице. Вместе они определяют общую визуальную структуру и макет элемента.
Какие способы центрирования блочного контента по горизонтали и вертикали существуют?
Горизонтальное центрирование:
- margin: 0 auto;: Установка автоматических отступов слева и справа у элемента с фиксированной шириной позволяет центрировать его по горизонтали.
- text-align: center;: Применение данного свойства к родительскому элементу позволяет центрировать текстовый контент и встроенные элементы.
- display: flex; и justify-content: center;: Установка CSS-свойства display: flex; для родительского элемента и justify-content: center; для центрирования дочерних элементов по горизонтали.
Вертикальное центрирование:
- display: flex; и align-items: center;: Установка CSS-свойства display: flex; для родительского элемента и align-items: center; для центрирования дочерних элементов вертикально посредством выравнивания по центру.
- position: absolute;, top: 50%; и transform: translateY(-50%);: Установка CSS-свойства position: absolute; и значений top: 50%; и transform: translateY(-50%); для элемента позволяют центрировать его вертикально относительно родительского элемента.
- display: table-cell; и vertical-align: middle;: Применение display: table-cell; к родительскому элементу и vertical-align: middle; к дочернему элементу позволяет центрировать его вертикально.
Центрирование по горизонтали и вертикали одновременно:
- display: flex;, justify-content: center;, align-items: center;: Установка CSS-свойства display: flex; для родительского элемента и justify-content: center; и align-items: center; для центрирования дочерних элементов как по горизонтали, так и по вертикали.
- position: absolute;, top: 50%;, left: 50%;, transform: translate(-50%, -50%);: Установка CSS-свойства position: absolute; и задание значений top: 50%;, left: 50%; и transform: translate(-50%, -50%); для элемента позволяют центрировать его по горизонтали и вертикали относительно родительского элемента.
Какие подходы в верстке есть (float, flex, grid, etc.)?
- Float (плавающие элементы): Float был одним из первых подходов для создания многоколоночных макетов. Элементы выравниваются по горизонтали с использованием свойства
float. Однако, float имеет некоторые ограничения и проблемы, связанные со сложностью верстки и управлением высотой контейнеров. - Flexbox (гибкая модель): Flexbox предоставляет более мощные возможности для создания гибких и респонсивных макетов. Он позволяет легко управлять выравниванием, пространствами между элементами, изменением порядка элементов и другими свойствами для создания сложных компонентов.
- Grid (сетка): Grid предоставляет более мощную систему разметки, чем flexbox, особенно для создания сложных сеточных макетов. Он позволяет создавать колонки и строки и распределять элементы на основе их местоположения в сетке.
- CSS таблицы: CSS таблицы предоставляют структурированный способ организации элементов внутри HTML таблиц. Они имеют свои особенности и ограничения, но могут быть полезны для определенных сценариев, где требуется использование таблиц.
Как сделать приложение responsive?
Для создания адаптивного (responsive) приложения веб-разработчики обычно используют следующие подходы и технологии:
- Медиа-запросы (Media Queries): Медиа-запросы позволяют применять стили к элементам в зависимости от размера и характеристик устройства, на котором отображается приложение. Вы можете определить различные точки остановки (breakpoints) для разных размеров экрана и адаптировать стили соответственно.
- Гибкая сетка (Flexible Grid): Использование гибкой сетки на основе процентных или единицем rem/em позволяет элементам адаптироваться и масштабироваться в зависимости от размера экрана. CSS-фреймворки, такие как Bootstrap или Foundation, предоставляют готовые решения для гибких сеток.
- Изображения, которые адаптируются к размеру экрана: Чтобы обеспечить адаптивность изображений, можно использовать атрибут
srcsetили элемент ``, чтобы предоставить различные варианты изображений разного размера для разных устройств. - Мобильное меню и интерфейс: Создание мобильного меню, размещения элементов интерфейса в удобном для мобильных устройств месте или использование тач-жестов и других возможностей сенсорных экранов - важные аспекты для разработки адаптивных приложений.
- Тестирование на разных устройствах: Важно проверять и тестировать ваше адаптивное приложение на разных устройствах и экранах, чтобы удостовериться, что оно отображается и работает должным образом.
Какие есть принципы семантической верстки?
- Использование подходящих HTML-тегов для разметки различных элементов веб-страницы.
- Организация иерархии и структуры контента с помощью правильного вложения тегов и использования семантических контейнеров.
- Использование значимых атрибутов HTML для явного указания смысла или значения элементов.
- Корректное использование и разметка форм, включая метки, поля ввода, кнопки и другие элементы форм.
- Избегание использования элементов только из-за их визуальных или стилевых свойств.
- Создание доступной верстки, учитывая использование атрибутов для улучшения доступности, явное описание элементов, предоставление альтернативного контента для изображений и другие принципы доступности.
Зачем нужны префиксы для некоторых CSS-свойств (-webkit-, -moz- и т. д.)?
Префиксы для CSS-свойств (например, -webkit-, -moz-, -ms- и т.д.) используются для обеспечения совместимости с различными браузерами и их версиями. Эти префиксы позволяют веб-разработчикам использовать экспериментальные или специфические для браузера функции до того, как они станут стандартной частью CSS.
Важно понимать, что префиксы - это временное решение и они не должны использоваться в продакшн-коде. Они предназначены для периода эксперимента и предоставления функциональности, которая пока что не поддерживается во всех браузерах. Когда функция становится стандартом, префикс может быть удален, а свойство можно использовать без него.
Примеры префиксов:
1. -webkit- : используется в браузерах на основе WebKit, таких как Google Chrome и Safari.
2. -moz- : используется в браузерах на основе Gecko, таких как Mozilla Firefox.
3. -ms- : используется в браузере Microsoft Internet Explorer и Microsoft Edge.
4. -o- : используется в браузере Opera.
В идеале, при разработке вы должны проверять поддержку функциональности в браузерах и использовать префиксы только для тех свойств, которые требуют их, чтобы обеспечить максимальную совместимость с разными платформами и версиями браузеров.
Как упростить написание кросс-браузерных стилей?
Написание кросс-браузерных стилей может быть сложной задачей, особенно при учете различий в интерпретации CSS разными браузерами. Вот несколько подходов, которые помогут упростить этот процесс:
- Используйте normalize.css: Подключение normalize.css в ваш проект поможет сгладить различия в стилях между разными браузерами, устанавливая единообразные значения по умолчанию для стилей элементов. Это позволит начать стилизацию на “чистом листе” и обеспечит вам более предсказуемую основу для кросс-браузерных стилей.
- Используйте вендорные префиксы: Некоторые свойства CSS требуют вендорные префиксы для обеспечения совместимости с разными браузерами. Например, свойства, связанные с трансформациями и анимациями, могут потребовать префиксов для работы в разных браузерах. Используйте инструменты, такие как Autoprefixer, для автоматической генерации вендорных префиксов в вашем CSS.
- Тестирование в разных браузерах: Проверка внешнего вида и работы вашего сайта в разных браузерах - важная часть процесса разработки. Используйте инструменты, такие как локальные установки разных браузеров или онлайн-сервисы, чтобы проверить, что ваш сайт выглядит и работает должным образом в целевых браузерах.
- Приоритизация и упрощение: В некоторых случаях придется ограничить себя, чтобы уменьшить сложность и повысить кросс-браузерную совместимость. Не всегда необходимо поддерживать все возможности исторических и малоиспользуемых браузеров. Определите список поддерживаемых браузеров и используйте функциональность, которая будет хорошо работать в этих браузерах. Is It Updated? и Can I Use? - это полезные ресурсы, помогающие определить совместимость CSS-функций и свойств в разных браузерах.
- Используйте CSS-фреймворки или библиотеки: Использование готовых CSS-фреймворков или библиотек, таких как Bootstrap или Foundation, может значительно упростить написание кросс-браузерных стилей. Они предоставляют готовые компоненты и сетки, предварительно протестированные в разных браузерах.
И наконец, всегда помните о принципе постепенного улучшения (graceful degradation) и прогрессивного улучшения (progressive enhancement), которые помогут вам создавать сайты, которые работают хорошо во всех браузерах, независимо от их возможностей.
Почему, как правило, лучше разместить подключение CSS между тэгами <head></head>, а JS
-ы , перед тэгом </body>, соответственно? Знаете ли вы какие-либо исключения, приведите примеры ?
Стили рекомендуется подключать в head для того, чтобы страница как можно быстрее приняла свой внешний вид. Скрипты подключенные в head могут затормозить этот процесс, в связи с этим их рекомендуется подключать перед закрывающим тегом body. Исключением являются скрипты аналитики, для определения количества посетителей, которые не дождались загрузки страницы. В этом случае скрипт должен быть подключен в head.
Как обеспечить корректное отображение текста на странице на нескольких языках (речь о кодировке)?
Кодировка HTML-страницы должна быть указана для того, чтобы браузер смог корректно отрисовать текст на странице. В противном случае вместо необходимых символов появятся малопонятные иероглифы.
Какую функцию выполняет элемент doctype?
Элемент <!DOCTYPE> передает браузеру информацию о типе данного документа - DTD. Другими словами, передает инструкции браузеру о версии языка HTML, на которой написан документ. Это дает возможность браузеру выбрать правильный вариант интерпретации содержимого документа.
<!DOCTYPE> необходимо ставить самым первым элементом в HTML документе, перед открывающим тегом <html> (документ должен начинаться с DOCTYPE).
<!DOCTYPE html>
На что нужно обратить внимание при разработке мультиязычных сайтов?
На объем кода, его читабельность и масштабируемость. А также, на быстродействие и производительность в процессе перерисовки контента, если перевод осуществляется «на лету». Если для каждой страницы сайта, существует ее локализованная версия, необходимо обратить внимание на то, идентифицируют ли ее поисковые системы.
Для чего нужны data — атрибуты ?
Для хранения дополнительно информации, ассоциированной с каким-либо элементом.
Синтаксис прост — любой атрибут, чьё имя начинается с data-, является data-* атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать data-атрибуты:
<article>
...
</article>
Чтение data-атрибутов в JavaScript осуществляется также просто. Для этого можно использовать метод getAttribute() с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект dataset.
var article = document.getElementById(‘electriccars’);
article.dataset.columns // “3”
article.dataset.indexNumber // “12314”
article.dataset.parent // “cars”
Опишите разницу между
,и
script — начнет загружать файл JS, как только встретит его, при этом загрузка браузером оставшейся части HTML страницы, продолжится после того, как будет выполнен js скрипт.
script-async — браузер не остановит обработку HTML страницы, а будет читать ее дальше. После того как скрипт загрузится — он выполнится, не дожидаясь загрузки всей HTML страницы. Если скриптов несколько — первым отработает тот, который быстрее загрузится.
При использовании script-defer — также будет асинхронное выполнение скрипта, но в отличие от script-async — первым сработает тот скрипт, который встретился раньше. Еще одно отличие от async — это то, что script-defer сработает, когда вся страница HTML будет обработана браузером.
Что такое прогрессивный рендеринг ?
Это процесс отрисовки контента страницы по мере его прогрузки (прогрессивно). Например, сначала рисуется текст, потом изображения, таблицы и т.п.
«Прогрессивный рендеринг на стороне сервера: ключом к ускорению веб-страницы является метод последовательного рендеринга частей веб-страницы на стороне сервера и отправки их клиенту по частям, не дожидаясь, пока будет отрисована вся страница».
Прогрессивный рендеринг на стороне сервера (PSSR) основан на концепции потоковой передачи HTML. PSSR разбивает страницы на осмысленные компоненты с помощью разделения кода. Эти части страницы управляются разными скриптами, и теперь у нас есть возможность сделать гидратацию независимо. Давайте посмотрим, как работает PSSR:
Браузер запрашивает у сервера HTML-код.
Сервер делает API запросы и сначала рендерит критический контент, а затем отправляет его клиенту.
Браузер анализирует HTML и отображает его на экране.
Сервер рендерит некритический контент и передает его браузеру.
Затем браузер анализирует и отображает некритичный контент.
Между тем JS-бандлы загружаются и выполняются в фоновом режиме, а браузер передаёт интерактивность элементам DOM.
PSSR повышает производительность вашего веб-приложения, извлекая и визуализируя компоненты страницы параллельным и приоритетным образом. Этот подход известен как метод прогрессивной гидратации. Особенности метода прогрессивной гидратации:
Рендер компонента не происходит до тех пор, пока он не появится в поле зрения или не понадобится для взаимодействия с пользователем.
Загрузка контента при взаимодействии с пользователем (прокрутка) – намного быстрее, чем при CSR или SSR
Тестирование показывает, что это может сократить время до появления первого интерактивного элемента.
Впечатления приятнее даже при медленном соединении.
За что отвечает атрибут srcset в тэге <img></img> ? Объясните, каким образом браузер обрабатывает значение этого атрибута.
Список из одного или нескольких значений, указывающих набор возможных изображений для отображения в браузере. Каждое значение атрибута может иметь дескрипторы ширины или плотности пикселей, на основании которых браузер понимает какою картинку из списка необходимо загрузить.
Использовали ли вы когда-то HTML-препроцессоры? Расскажите о недостатках/преимуществах любого из них.
Препроцессоры дают дополнительный функционал по отрисовке коллекций, а также использованию условных конструкций непосредственно в HTML файле и т.д. Также дают более короткий синтаксис, PUG, Haml. Вышеупомянутый PUG обрабатывает вложенности с помощью отступов, что при копипасте кода часто ломает все верстку и ее сборку.
Будет ли работать свойство vertical-align с блочными и строчно-блочными элементами?
Нет, свойство vertical-align применяется только к элементам с display: inline или display: inline-block. Оно не будет работать с блочными (display: block) или строчно-блочными (display: flex, display: grid) элементами.
Свойство vertical-align управляет вертикальным выравниванием элемента внутри строки или контейнера, к которому он принадлежит. Когда свойство применяется к inline элементу, оно изменяет его позицию относительно линии базовой линии.
Для блочных элементов и строчно-блочных элементов, вместо vertical-align используйте другие свойства, такие как margin, padding, align-items, align-content, align-self и другие, для достижения нужного вертикального выравнивания или расположения содержимого.
Когда использовать margin, а когда padding согласно спецификации?
Согласно спецификации CSS, margin и padding имеют разные цели и применяются в разных ситуациях:
-
marginиспользуется для создания пространства вокруг элемента. Он управляет внешними отступами элемента от соседних элементов или границы родительского контейнера. Отрицательные значенияmarginмогут использоваться для создания перекрытий элементов. -
paddingиспользуется для создания пространства внутри элемента. Он управляет внутренними запасами элемента между его содержимым и его границей. Также может использоваться для создания запасов внутри границы элемента.
Таким образом, margin регулирует отступы вокруг элемента, в то время как padding регулирует отступы внутри элемента.
Примеры использования:
- Применение
marginможет быть полезно, когда вам нужно создать пространство между элементами, чтобы добиться визуального разделения или баланса. Например, между блоками разметки или между элементами списка. - Использование
paddingможет быть полезно для создания отступов внутри блока, чтобы разделить содержимое элемента от его границы и соседних элементов. Например, внутри контейнера с текстом, чтобы предотвратить непосредственное прилегание содержимого к границе контейнера.
Расскажи про float
float - это CSS свойство, которое определяет, как элемент будет выровнен вдоль горизонтальной оси в потоке содержимого. Определяет сторону, по которой будет выровнен элемент. Соседние элементы будут «обтекать» такой элемент по противоположной стороне. При использовании значения float для элемента, элемент будет “плавать” или “плыть” влево или вправо в пределах доступного пространства.
Основное назначение свойства float состоит в создании обтекания текстом других элементов. Когда элементу присваивается значение float, он исключается из обычного потока содержимого и остальные элементы могут обтекать его по бокам.
Еще одно распространенное использование float - создание макетов с использованием метода “float-основанных колонок”. При этом элементы могут плавать рядом друг с другом и занимать доступное горизонтальное пространство.
Однако, float также имеет свои ограничения и негативные эффекты. Использование float может сложно контролировать поведение элементов, приводить к потере высоты родительского элемента, а также требовать дополнительных мер для исправления проблем с позиционированием.
В современных подходах к веб-разработке часто применяются альтернативные методы верстки, такие как CSS Flexbox или CSS Grid, для более удобного размещения элементов на странице.
Что такое специфичность селекторов CSS и как она работает?
Специфичность селектора (еще называют весом) это свойство определяющее приоритет стилевого правила, то есть то, какой стиль будет применен к HTML элементу в итоге. Например, используя какую-нибудь UI библиотеку, элементам этой библиотеки будут применены правила заданные авторами по умолчанию. При необходимости можно поменять стили на свои, «перебив» дефолтные более специфичным селектором.
Какая разница между сбросом и нормализацией CSS? Что вы выберете и почему ?
Цель сброса CSS — сбросить все стили в ноль для того, чтобы можно было начать стилизацию сайта с чистого листа. Недостатком сброса стилей является то, что частично их придется устанавливать заново.
Цель нормализации — привести исходные стили к единому состоянию, во всех браузерах. Если рассматривать Normalize.css, то с его помощью не просто устанавливаются определенные значения стилей, но и решаются некоторые проблемы отображения элементов, в особенности в мобильных браузерах.
Выбирать между двумя инструментами стоит в зависимости от поставленной задачи.
Что делает свойство z-index и как формируется контекст наложения?
Определяет положение элемента по оси Z. Если элементы перекрываются друг другом (накладываются), это свойство диктует порядок наложения. Работает только для элементов у которых свойство position установлено как absolute/relative/fixed.
Опишите BFC (Block Formatting Context — блочный контекст форматирования) и принцип его работы.
Block formatting context — одна из трех областей форматирования, на ряду с inline formatting contexts и flex formatting contexts. Это область в которой происходит расположение и взаимодействия элементов по определенным правилам. В частности элементы отображаемые в области BFC подчиняются правилам блочной модели (CSS Box Model), которая определяет взаимодействие внешних, внутренних отступов, границ (margins, padding, borders) с другими элементами находящимися в той же области. Принцип работы BFC лучше всего показывать на примере, некоторые из них можно найти по ссылке ниже.
Какие существуют методы очистки floats и какие из них подходят для какого контекста ?
Свойство clear, примененное к нижестоящему (от float) элементу со значениями left, right, both, а также свойство overflow со значением hidden. Само по себе свойство overflow управляет отображением содержимого блока (добавляет полосы прокрутки, обрезает не поместившийся контент), в добавок, значения auto, scroll или hidden отменяют свойство float.
Каким образом вы боритесь с проблемами стилизации, связанными с кросс-браузерностью?
Есть несколько основных решений проблем стилизации, связанных с кросс-браузерностью. Например, разделение стилей для разных браузеров и устройств, а также добавление вендорных префиксов к стилевым правилам. Метод разделения стилей заключается в идентификации вида браузера пользователя и применении соответствующего стиля совместно с основным, путем добавления условных комментариев (для IE) или CSS-хаков. С помощью правила @media можно указать тип устройства, для которого будет применены определенные стили, а добавление вендорных префиксов к стилям расширит список поддерживаемых браузеров.
Как работать со стилями в старых браузерах с ограниченными возможностями? Какие методы/техники вы используете ?
Подход progressive enhancement предполагает поэтапное создание веб-интерфейсов, должны создаваться поэтапно, циклически, от простого к сложному. На каждом из этапов создается законченный веб-интерфейс, как улучшенная версия предыдущего. Всего можно выделить 4 этапа:
HTML — содержимое страницы размечается с помощью HTML. Важно сделать логически и семантически правильную разметку, тогда документ будет корректно отображен любым браузером. Этот этап является самым важным.
CSS — документ получает аккуратный вид: появляется сетка страницы, фоновые изображения и т.д.
CSS3 — добавляются анимационные и декоративные фишки, тени, плашки, уголки и т.д.
JavaScript — улучшается взаимодействие с интерфейсом: AJAX решения, динамические элементы и т.д.
Такой подход в сочетании с mobile first гарантирует, что страница сайта будет корректно отображаться на любых устройствах. Подход graceful degradation имеет обратную философию — функционал сайта деградирует от сложного к более простому в ранних версиях браузеров, где еще не реализованы последние фичи. Для определения наличия нужного функционала браузера используется другой прием — feature detection (правило @supports)
Какие вы знаете способы для скрытия контента сайта (при этом оставив его доступным для скринридеров)?
Свойство 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;
}
Что вы можете рассказать о медиа-запросах ?
Медиа-запросы позволяют адаптировать страницы для разных типов устройств (принтеров, речевых браузеров и т.д.) или для устройств с определенными характеристиками: ширина (width), высота (height), соотношение ширины к высоте области просмотра (aspect-ratio), ориентация (orientation), разрешение (resolution), количество бит на каждый из цветовых компонентов устройства (color) и другие.
Что вы можете рассказать о стилизации SVG?
Стилизация (изменение внешнего вида) SVG-элементов аналогично HTML, с некоторыми особенностями: фон назначается свойством fill, а граница — stroke вместо border. Свойства могут добавляться как непосредственно в теги, так и как стили. Также возможно подключение внешних стилей. Поскольку SVG основан на XML-разметке, то стиль в .svg-документе необходимо заключать в CDATA, иначе конструкция будет конфликтовать с XML-парсерами. SVG — элементы можно группировать с помощью тэга g и применять к ним общие стили.
Приведите какой-либо пример свойства @media отличительного от @media screen ?
@media all — значение по умолчанию, для всех типов устройств. @media print — принтеры.
@media speech — программы для воспроизведения текста вслух (в том числе речевые браузеры) и речевые синтезаторы.
Какие моменты по написанию эффективного CSS вы бы выделили?
- Код должен быть валидным (корректно выполняться).
- Комментарии должны быть подробными.
- Код должен быть разбит на логические блоки, каждый блок нужно отделять пустой строкой.
- Использование иерархии облегчает чтение кода.
- Свойства желательно размещать в алфавитном порядке.
- Каскадные таблицы (CSS) нужно размещать в отдельном файле.
- Неиспользуемые селекторы нужно удалять.
- Нужно использовать там, где возможно, универсальные свойства.
Каковы преимущества/недостатки использования препроцессоров CSS? Опишите, что вам понравилось/не понравилось в использованных вами, препроцессорах.
Преимущества использования препроцессоров: использование дополнительного функционала (переменных, условий, циклов, функций и т.д.). Недостатки, в целом, проявляются при неправильном использовании этого функционала. Например:
Злоупотребление примесями (@mixin, когда один объект копирует свойства другого объекта). В итоге значительно увеличивается размер файла и падает общая производительность.
Использование расширения (@extend) в Sass позволяет избежать описанную выше проблему, но может возникнуть другая: многократное расширение базового класса может привести к получению CSS-правила с длинным именем селектора, что плохо сказывается на производительности.
При редактировании миксина или базового класса можно, не заметив, изменить свойства множества объектов.
Обобщая селекторы, можно слишком увеличить их специфичность, что затруднит их управление и поддержку.
В целом, использование препроцессоров предоставляет отличные синтаксис и возможности, но нужно тщательно взвешивать все за и против их использования для каждого конкретного проекта.
Какие существуют псевдоэлементы и для чего они используются.
Псевдоэлемент в CSS — это ключевое слово, которое добавляется к селектору и позволяет стилизовать определенную часть выбранного элемента. Псевдоэлементы: :after, :before, :first-letter, :first-line.
:after — применяется для вставки нужного контента после выбранного элемента. Применяется со свойством content, которое определяет содержимое для вставки.
:before — применяется для вставки нужного контента до выбранного элемента. Также необходимо задать свойство content с содержимым для вставки.
:first-letter — добавляет к первому элементу в тексте и определяет его стиль: можно создавать буквицу (увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста) или выступающий инициал (увеличенная прописная буква, линия которой совпадает с линией основного текста).
:first-line — используется для изменения первой строки блочного текста.
Что такое блочная модель, и как, с помощью CSS, менять расположение блоков на странице в браузере?
Блочная модель — модель, при которой каждый элемент представляет собой прямоугольный блок и имеет ширину, высоту, поля, границы и отступы. Менять расположение элементов можно с помощью позиционирования (position), отступов (margin) и трансформирования (transform).
Что делает свойство *{box-sizing: border-box;}? Какие его преимущества ?
При использовании box-sizing: border-box свойства width и height включают в себя значения padding и border, но не отступов (margin). Т.е. объект остается с фиксированными параметрами, но уменьшается место для контента. При использовании border-box, не нужно беспокоиться о том, сколько места будет занимать отступ или граница, так как эти значения просто отнимаются от общей ширины, а не добавляются к ней
За что отвечает свойство display в CSS? Приведите пару примеров его использования.
Свойство display определяет как элемент будет показан в документе. Если указать свойству display значение none, то элемент и все его дочерние элементы будет удалены из дерева доступности (объект в котором хранится информация для вспомогательных технологий по обеспечению доступности сайта для людей с повышенными потребностями) и не будут восприниматься технологиями чтения экранов. Значение свойства display — contents, удаляет элемент из дерева доступности, дочерние элементы становятся дочерними элементами следующего уровня в DOM.
Объясните разницу между значениями inline и inline-block ?
Inline и inline-block это значения, которые можно назначить свойству display. При использовании inline для любого элемента он становится строчным. Inline-block объединяет в себе характеристики как строчных, так и блочных элементов: блочный элемент с поведением, как у строчного. Содержимое таких элементов будет отображаться, как обычно, но при этом блоки будут вести себя как строчные элементы, выстраиваясь в одной строке друг за другом и переносясь на новую строку лишь при необходимости.
Объясните разницу между псевдоклассами «nth-of-type()» и «nth-child()» ?
nth-of-type() используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.
nth-child() это псевдокласс, который используется для выбора дочерних элементов с помощью числового выражения без учета типов элементов.
Объясните разницу между relative, fixed, absolute и static — видами позиционирования элемента ?
Relative — положение элемента задается относительно исходного расположения. Сам элемент становится родительским для всех дочерних, абсолютно позиционировнных элементов.
Fixed — положение элемента привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке страницы.
Absolute — положение элемента задается относительно границ родительского элемента (тот у которого position: relative), элемент выпадает из изначального контекста.
Static — положение элемента остается неизменным. Такой вид позиционирования еще называют нормальным. Элементы отображаются в том же порядке, как они идут в исходном коде.
Какие CSS фреймворки вы использовали? Как бы вы изменили/улучшили их?
Foundation — это адаптивный фреймворк, который позволяет легко создавать красивые адаптивные веб-сайты, приложения и электронные письма. Основа семантическая, удобочитаемая, гибкая и полностью настраиваемая. Foundation достаточно громоздкий и сложный для начинающих разработчиков, но создатели проводят учебные занятия.
В чем разница между разработкой адаптивных веб-сайтов и использовании “Mobile first” стратегии ?
При адаптивной разработке главными являются 3 вещи: резиновый макет, медиа-выражения и гибкие картинки. Все размеры рекомендуют указывать в процентах для большей точности. Сайт должен быть ориентирован не на конкретное устройство, а на содержимое.
Mobile First — подход, который предполагает сначала разработку мобильной версии, а затем ее усложнение до десктопной. Самая важная информация должна быть показана первой. Сайт должен быть легким, для быстрой загрузки при любой скорости интернета.
Работали ли вы с оптимизацией графики для Retina экранов? Какие методы вы использовали?
Разные методы оптимизации графики подходят для разных задач:
- Для одностраничных сайтов с несколькими изображениям можно задать параметры width и height тегу img просто разделив пополам размеры изображения.
- На сайтах с несколькими изображениями в контенте можно делить пополам размеры изображений используя Javascript.
- На сайтах с ограниченным количеством фоновых изображений можно использовать изображение в качестве фона с необходимыми размерами (background-size) определенного div‘а.
- На сайтах или в приложениях, в которых применяется background-image для элементов дизайна, но нет изображений внутри контента device-pixel-ratio, чтобы установить нужное соотношение между физическими и CSS-пикселями.
- На сайтах с большим количеством иконок и для быстрого прототипирования можно использовать иконочные шрифты (замена букв в шрифте на нужные символы с последующим их отображением на странице с помощью CSS).
- На любых сайтах с изображениями в контенте можно использовать window.devicePixelRatio для оптимизации графики.
- Масштабируемую векторную графику (SVG) можно использовать на любых сайтах, он подходит для иконок, логотипов и простых векторных иллюстраций.
В каких случаях есть смысл использовать функцию translate() вместо абсолютного позиционирования и наоборот ? И почему?
В случае создания анимаций, использование 2D-трансформаций вместо абсолютного позиционирования обычно обеспечивает большую частоту кадров за счёт более быстрого рендеринга. Свойство position имеет большее отношение к вёрстке, а не к визуальным эффектам и анимации, поэтому абсолютное позиционирование лучше использовать при необходимости статически разместить контент.
Какая разница между элементами div и span
Div — блочный элемент, а span — строчный элемент. В соответствии с семантическими требованиями div используют для группировки контента в секции, а span — для оформления текста и изображений.
Что такое метатеги
Метатеги — это HTML-теги, которые используют, чтобы описать метаданные веб-страницы. Метаданные — это данные, которые описывают другие данные, а в вебе — HTML-документы. Указывать метаданные важно, чтобы поисковики правильно отображали сайт в поисковой выдаче и он показывался на первых строчках. Еще метатеги делают сайт удобнее для пользователей: позволяют быстрее понять, о чём он.
Есть разные виды метаданных:
заголовок страницы — задается тегом title;
автор и описание — тег meta с соответствующим значением свойства name;
данные для отображения превью страницы в фейсбуке* по протоколу Open Graph;
ссылка на favicon — иконку для отображения в закладках и во вкладке браузера: тег link;
ссылка на картинку для отображения в apple-устройствах — тег link со значением свойства rel apple-touch-icon-precomposed.
Иногда к метаданным относят язык документа — задается как свойство lang тега html, а иногда связанные css- и js-документы — задается тегами link и script.
Что такое медиазапросы
Медиазапросы — технология, которую используют для адаптивной верстки. С помощью этой технологии можно изменять внешний вид элементов веб-страницы, применяя различные CSS-правила в зависимости от условий, например: размер окна браузера, разрешение и ориентация экрана и так далее.
Что такое псевдоклассы
Псевдокласс — это ключевое слово, которое добавляется к селектору. Оно нужно, чтобы определить, как применить CSS-правила к элементам, которые находятся в определенном состоянии или положении в дереве элементов.
Например:
задать цвет ссылки, который она должна принимать, если на нее наводят курсор мыши (псевдокласс :hover);
стилизовать чекбокс в состоянии, когда он отмечен (:checked);
покрасить первый дочерний элемент (:first-child).
Какими способами можно визуально скрыть элемент
с помощью свойства display;
с помощью свойства opacity;
с помощью свойства visibility;
с помощью position:absolute;
уменьшить размеры элемента до нуля.
