Когда язык разметки превращается в язык программирования – происходит чудо!
Тогда гораздо меньше нужен JS
Добавить прилипание на iOS можно css-хаком: -webkit-overflow-scrolling: touch;
Более сложная структура карусели, с карточками с фото и текстом есть в демо
Поддержка предпочтений цветовой схемы пользователя
<meta name="color-scheme" content="dark light">
Плавный скролл к объекту при нажатии на ссылку-якорь без JS
@media (prefers-reduced-motion: no-preference) {
.smooth-scroll {
scroll-behavior: smooth;
}
}
А при наличии прилипающей шапки добавить:
scroll-margin: 100px
Другие свойства скролла. Анимация для скролла по вертикали (y), тип анимации (mandatory) - докручивание при начале движения
Если заменить mandatory на proximity - анимация будет возвращаться на предыдущий элемент, если не докрутили.
scroll-snap-align позволяет сделать привязку анимации к месту: сначала, в конце, по центру.
.grid {
width:400px; height:400px;
overflow: scroll;
scroll-snap-type: y mandatory;
}
.grid > div {
height:400px;
display:flex;
scroll-snap-align:start;
}
Нажатие сквозь объект
pointer-events: none
Наложение фона с градиентом и фото
background: linear-gradient(301deg, rgba(249,245,243,0) 35%,
rgba(249,245,243,0.95) 95%), url('theme/fon.jpg') right no-repeat;
background-size:cover,cover; margin-top:10px; border-radius:20px;
Использование jpg с белым фоном вместо прозрачных PNG24 – позволяет делать белый фон прозрачным и сильно экономит размер файлов
mix-blend-mode: multiply;
Круговые диаграммы можно сделать на чистом CSS, но предпочтительнее использовать SVG
Часто попадаются отзеркаленные фильмы. Развернуть видео в браузере можно с помощью css
transform: scale(-1, 1);
Применить к элементу видеоплеера на странице
Параллакс на чистом CSS с помощью свежих анимаций пока не поддерживают Safari (превращающийся в новый IE) и Firefox. Но есть хаки еще 2014 года. И максимально простой параллакс на чистом CSS.
Реальная видимая высота и ширина, в отличии от известных ранее vw и vh. Помогает особенно в мобильной верстке. Например, закрепление снизу блока навигации.
height: 100dvh; width: 100dvw;
Радиус закругления вложенных элементов, если все элементы с закруглением, можно просчитывать автоматически
.parent {--nested-radius: calc(var(--radius) - var(--padding));}
.nested {border-radius: var(--nested-radius);}
Псевдокласс :target актвируется при нажатии по якорю
:target { border: 2px solid black; }
На нем можно сделать выделение определенного блока, при переходе к нему по якорю, или создать фотогалерею, аналогично lightbox, без JS
Об этом писали на Хабре еще в 2011 году... Тогда реализация оставляла желать лучшего, т.к. остальные возможности разметки были еще не так хороши, как сейчас.
<a href="#img1">
<img src="./small.jpg">
</a>
<a href="#" class="lightbox" id="img1">
<span style="background-image: url('./large.jpg')"></span>
</a>
.lightbox { display: none; position: fixed; z-index: 999;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.8); }
.lightbox:target {display: block;}
Когда нужен focus-trap (чтобы фокуc не выходил за пределы диалогового окна) – используется HTML-атрибут inert
<article class="content" inert><!-- контент --></article> <button type="button" onclick="window.myDialog.showModal()">Открыть как модалку</button> <dialog aria-label="Приветствие (заголовок)"> <form method="dialog"><button>Закрыть</button></form> </dialog>
Окно можно открыть с помощью JavaScript-методов:
show() — добавляет атрибуты open и aria-modal="false".
showModal() — открывает в режиме «модального окна». Добавляет атрибуты open и aria-modal="true". Появляется подложка в виде псевдоэлемента ::backdrop, который можно стилизовать.
Аккордеон через теги detailes и summary пока поддерживается только Хромом. Но аккордеоны можно реализовать на чистом CSS с помощью списков LI, якорей или radio-кнопок. Часто в компоненте “accordion” допускается раскрытие только одного элемента со скрытием остальных. HTML-элементы details и summary так делать не умеют. Они возвращают событие toggle при переключении и этим можно воспользоваться, добавив совсем немного javascript
Ленивая загрузка фото и фреймов через HTML-атрибут loading
loading="lazy"
Изменяемый размер панелей на чистом CSS. Пример 1 и Пример 2 – за счет свойства
resize: horizontal;
Свойство CSS: aspect-ratio - позволяет задать соотношение сторон для элемента. Особенно актуально для резиновой верстки:
.aspect-ratio { aspect-ratio: 16/9; }
Свойство clamp(минимальное (мобильное), предпочитаемое, максимальное (десктопное) значение) – позволяет задать диапазон значений для свойства. Сетки, колонки, анимации, переходы – настраивать можно всё. Актуально, когда есть две верстки - мобильная и десктопная и нужно подстроить все промежуточные версии. Онлайн генератор которым лично пользуюсь при работе с типографикой для генерации адаптивных размеров для font-size можно найти по ссылке.
.clamp-example { font-size: clamp(16px, 2vw, 24px); }
Кастомизация Input
// обращение к рамке инпута после нажатия
input:focus {outline: 1px dolid blue}
// обращение к тексту по-умолчанию
input::placeholder {color:blue;}
// настройка цвета каретки (текстового мигающего курсора)
input {caret-color:blue;}
Counter на CSS – позволяет создавать счетчики для элементов, динамическую нумерацию (в кавычках указывается разделитель). Это как списки OL > LI, только нумерация для любых элементов.
ol { counter-reset: my-counter; }
li::before {
counter-increment: my-counter;
content: counter(my-counter) ">> ";
}
// или
body { counter-reset: my-counter; }
h2::before {
counter-increment: my-counter;
content: counter(my-counter) ": ";
}
Свойство Flexbox order – позволяет изменять порядок элементов внутри контейнера Flexbox. По-умолчанию order всех элементов = 0.
.flex-container { display: flex; }
.flex-item:nt-child(1) { order: 2; }
Свойство clip-path - позволяет обрезать элементы по заданной области. Областью может быть и polygon() с определенными координатами. Также можно добавить анимацию перехода и эффект hover. При наведении может плавно перетекать друг в друга различная маска.
.clip-path-example {
width:400px; height:400px;
background:blue;
clip-path: circle(50%);
transition: all 300ms ease-in-out;
}
.clip-path-example:hover { clip-path: circle(100%); }
Свойство perspective - позволяет задать перспективу для элементов в 3D-пространстве, трансформацию в 3 осях. Чем больше значение perspective – тем дальше от нас угол обзора.
.container {
width:400px; height:400px;
border: 1px solid blue;
perspective: 200px;
}
.figure {
width:400px; height:400px;
background: lightblue;
transform: rotateX(46deg);
}
Новый формат цвета OKLCH – для OLED-экранов и устройств Apple + улучшенный контроль яркости.