Навыки Верстальщика

Псевдоэлемент ::marker в CSS используется для стилизации маркеров элементов списка, таких как <li> в ненумерованных (<ul>) или нумерованных (<ol>) списках.Этот Псевдоэлемент позволяет контролировать внешний вид символов, используемых для маркировки пунктов списка, включая такие свойства как цвет, размер шрифта и использование шрифта.Так же вы можете использовать свойство content, которое позволяет заменить стандартный маркер списка на любой символ или текст.⚡️ Навыкиверстальщика | CSS

CSS Свойство outlineЗадаёт внешнюю линию вокруг элемента, не занимая при этом пространства и не изменяя размер элемента.- Отличается от border тем, что не влияет на расположение или размер элемента.Значения: - outline-width — Толщина контура. - outline-style — Стиль контура. Например: solid, dotted, dashed - outline-color — Цвет контура. Можно указать любой цвет в форматах цвета CSS, например: red, #FF0000, rgb(255, 0, 0), rgba(255, 0, 0, 0.5). - outline-offset — Отдельное свойство, задающее расстояние между контуром и границей элемента. Может быть положительным (контур отдаляется от элемента) или отрицательным (контур приближается к элементу).Примеры:- Простой контур:.selector { outline: 2px solid yellow;}- Этот стиль добавит красный сплошной контур шириной в 2px вокруг элемента с классом .selector.- Контур с отступом:.selector { outline: 2px dashed blue; outline-offset: 5px;}- Этот стиль создаст синий пунктирный контур с отступом в 5px от границы элемента.- Удаление контура:.selector { outline: none;}- Удаляет контур у элемента, что может быть полезно для стилизации :focus состояния элементов формы, чтобы избежать автоматически добавляемых браузером контуров.Зачем использовать:- Улучшение доступности: Outline часто используется для подсветки элемента при его фокусе, что важно для пользователей, навигирующих с помощью клавиатуры.- Визуальное выделение: Выделение активных или важных элементов на странице без влияния на их размер и расположение.⚡️ Навыкиверстальщика | CSS

Семантический тег <search>Служит для разметки секций, предназначенных для поиска или фильтрации данных. Этот элемент может содержать различные элементы управления формой, включая текстовые поля ввода, выпадающие списки, кнопки и прочие компоненты.Ранее для указания поисковых форм использовался атрибут role="search", но теперь для этой цели можно применить тег <search>Пример использования этого тега для поисковой формы выглядит следующим образом:<search> <form action="/search" method="get"> <input type="search" name="search-text" /> <button>Поиск</button> </form></search>Важно подчеркнуть, что область применения <search> не ограничивается простым текстовым поиском по сайту или Интернету. Этот элемент также может быть использован для организации фильтрации данных, например, в списках или таблицах.<search> <h2>Фильтрация результатов</h2> <form> <label for="cartype">Выберите класс автомобиля:</label> <select id="cartype"> <option value="coupe">Купе</option> <option value="sedan">Седан</option> </select> <label for="electric">Электрический:</label> <input type="checkbox" id="electric" /> </form></search>На текущий момент поддержка браузерами нового тега <search> составляет 85.42% ⚡️ Навыкиверстальщика | HTML

Wave анимация текста на чистом CSSHTML:<div class="text"> <div class="title">Wave animation text</div> <div class="title">Wave animation text</div> </div>CSS:.text { position: relative;}.title { color: #fff; font-size: 72px; font-weight: bold; position: absolute; transform: translate(-50%, -50%); text-transform: uppercase; white-space: nowrap;}.text > .title:nth-child(1) { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.308);}.text > .title:nth-child(2) { color: #73aaf7; animation: animate 4s linear infinite;}@keyframes animate { 0%, 100% { clip-path: polygon( 0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100% ); } 50% { clip-path: polygon( 0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100% ); }}⚡️ Навыкиверстальщика | CSS

Атрибут aria-hidden используется в HTML для повышения доступности контента, указывая, что элемент и все его дочерние элементы должны быть недоступны для таких технологий как экранные читалкиАтрибут aria-hidden рекомендуется использовать в следующих сценариях для повышения доступности веб-контента:1. Декоративные элементы: Элементы, которые служат чисто визуальной цели и не несут информационной нагрузки, такие как иконки или декоративная графика, могут быть отмечены aria-hidden="true", чтобы экранные читалки игнорировали их.2. Динамически скрытый/показываемый контент: В ситуациях, когда используется динамическое переключение между скрытым и видимым состояниями контента (например, аккордеоны, выпадающие меню, табы), атрибут aria-hidden может быть динамически изменен с true на false и наоборот.3. Дублирующий контент: Когда информация представлена в нескольких форматах (например, текст и графика, представляющая то же самое), можно скрыть визуальные элементы, чтобы избежать дублирования информации при чтении экранными читалками.⚡️ Навыкиверстальщика | HTML

CSS функции min() и max()Позволяют определять минимальное или максимальное значение элемента.Функция min() возвращает наименьшее значение из набора аргументов. Это позволяет задать значение, которое будет адаптироваться к условиям, но не превысит заданный максимум. Пример использования:width: min(100vw, 600px);В этом примере ширина элемента будет равна 100% ширины окна просмотра (100vw), но не более 600 пикселей. Это означает, что на экранах шириной более 600 пикселей ширина элемента будет ограничена 600 пикселями, в то время как на более узких экранах элемент будет занимать всю ширину экрана.Функция max() возвращает наибольшее значение из набора аргументов. Это позволяет задать минимальное значение, ниже которого размер или другой параметр стиля упасть не могут. Пример использования:width: max(50vw, 300px);В этом случае ширина элемента будет равна 50% ширины окна просмотра (50vw), но не менее 300 пикселей. Это означает, что на экранах шириной менее 600 пикселей (где 50% окажется меньше 300 пикселей) ширина элемента будет фиксированной и равной 300 пикселям, а на более широких экранах элемент будет расширяться, занимая половину ширины экрана.⚡️ Навыкиверстальщика | CSS

Свойство CSS pointer-events позволяет нам контролировать взаимодействие элементов с событиями курсора. Это особенно полезно, когда нужно управлять поведением элементов в ответ на клики мыши.Когда pointer-events задано как none, элемент фактически становится прозрачным для событий мыши. Клики как бы "пронизывают" его, попадая на другие элементы, расположенные за ним или под ним на веб-странице.Один из классических сценариев, где это свойство может оказаться крайне полезным, связан с интерфейсами типа бургер-меню.Допустим, у нас есть структура меню с бургер-иконкой, в которой используются вложенные span элементы для создания анимации. Если мы назначаем обработчик клика на всю иконку бургера для открытия меню, то может проявиться неожиданное поведение: меню откроется, но анимация иконки не срабатывает как предполагалось.<div class="wrapper"> <div class="burger"> <span></span> <span></span> <span></span> </div> <nav class="menu"> <ul class="menu__list"> <li class="menu__list-item"> <a class="menu__list-link" href="">Главная</a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="">О нас</a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="">Преимущества</a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="">Контакты</a> </li> </ul> </nav> </div>Такое поведение может быть связано с тем, что клик фактически попадает не на сам бургер, а на один из вложенных span. И чтобы обеспечить корректную анимацию бургера, мы можем применить pointer-events: none; ко всем span внутри бургера. Это гарантирует, что все события мыши будут улавливаться именно самим бургером, обеспечивая точность и надежность при открытии меню..burger span { pointer-events: none;}⚡️ Навыкиверстальщика | CSS

Несколько рабочих способов для создание градиентой рамки у блочных элементов.HTML: <div class="first-example"> <div>Example with a box</div> </div> <div class="second-example">Example with a box</div>CSS:.first-example { background: linear-gradient(180deg, blue, red, yellow); border-radius: 2px; padding: 5px; color: #fff; margin-right: 20px;}.first-example > div { background-color: #000; padding: 20px 40px; border-radius: 2px;}.second-example { border: 5px solid transparent; background: linear-gradient(#000, #000) padding-box, linear-gradient(180deg, blue, red, yellow) border-box; border-radius: 2px; padding: 20px 40px; color: #fff;}⚡️ Навыкиверстальщика | CSS

Container Queries в CSS — это относительно новая концепция, призванная предоставить больше гибкости при стилизации компонентов на базе размера родительского контейнера, а не размера всего вьюпорта, как это делается в медиа-запросахContainer Queries позволяют каждому компоненту адаптироваться в зависимости от пространства, в котором он расположен, вместо глобальных размеров экрана. Для использования Container Queries вам нужно сделать следующее:1. Определение контейнера: Сначала нужно определить контейнер, внутри которого будут срабатывать Container Queries..container { container-type: inline-size;}В этом примере для .container устанавливается свойство container-type, что означает, что этот элемент будет «контейнерным контекстом» для Container Queries.2. Написание Container Query: Затем вы можете писать стили внутри запроса, используя @container и указывая условия, при которых эти стили будут применяться.@container (max-width: 992px) { .title { /* Стили для .title когда родительский .container меньше 992px */ }}Этот @container запрос применится к элементу с классом .title, когда ширина их родительского .container будет менее 992 пикселей.⚡️ Навыкиверстальщика | CSS

Атрибут aria-label — позволяет добавить описание элементов интерфейса для особых пользователей и улучшить доступность контента.aria-label особенно полезен в следующих случаях:1. Когда у элемента нет визуального текста, который экранные чталки могли бы зачитать, например, у кнопок с иконками.2. Для улучшения контекста и описания для элементов, который понятнее описывает их функцию, чем видимый текст.3. Чтобы заменить существующую текстовую метку, которая может быть непонятной для пользователей с ограниченными возможностями.Пример использования aria-label:<button aria-label="Закрыть" onclick="closeModal()"> <img src="close-icon.png" alt=""></button>В этом примере кнопка содержит только изображение (иконку закрытия), без текстовых подсказок. Чтобы помочь пользователям с ограниченными возможностями понять функцию кнопки, атрибут aria-label используется для предоставления описания действия кнопки — в данном случае "Закрыть". Данный атрибут поможет экранной чталке правильно интерпретировать и озвучить назначение кнопки.Важно отметить, что aria-label имеет больший приоритет перед другими атрибутами, обеспечивающими доступное описание, такими как alt у тега <img>. Поэтому, если у элемента есть визуальный текст, в большинстве случаев предпочтительнее его использовать, а aria-label применять только тогда, когда текстовых меток нет или они не дают ясного понимания функциональности элемента.⚡️ Навыкиверстальщика | HTML