Glo Academy

🎨 Зебра в таблице не ломается после фильтра Таблицу делают полосатой через tr:nth-child(odd), и всё хорошо, пока не включишь фильтр. Скрытая строка пропадает с экрана, но в счёте остаётся, и две серые строки встают подряд. Считать только видимые строки можно прямо в селекторе:

/* было: скрытые строки тоже считаются */
tr:nth-child(odd) {
  background: #e4e7f2;
}

/* стало: считаются только видимые */
tr:nth-child(odd of :not(.hidden)) {
  background: #e4e7f2;
}

Запись odd of :not(.hidden) работает в два шага. Сначала браузер отбирает строки без класса hidden, потом нумерует только их и красит нечётные. Скрытые строки в нумерацию больше не попадают. На гифке включается фильтр «Только в наличии». Слева обычный nth-child, и полосы сбиваются. Справа новая запись, полосы идут через одну. Если фильтр прячет строки атрибутом hidden, а не классом, в скобках пиши :not([hidden]). Работает в Chrome 111+, Firefox 113+, Safari 9+. 🔥 — если было полезно @glo_academy | #css_day

🧰 HyperUI Нужна на сайт секция с тарифами или карточки товаров, а верстать их с нуля долго. Готовые UI-библиотеки обычно ставятся пакетом, и ради пары блоков в проект едут лишние зависимости. В HyperUI больше 300 бесплатных блоков на Tailwind: шапки, тарифы, футеры, формы, таблицы, модалки. Ставить ничего не надо. Находишь блок на hyperui.dev, жмёшь Copy и вставляешь разметку к себе. На ролике так переезжает блок тарифов: слева сайт HyperUI, справа твоя страница. Дальше это обычный HTML с классами Tailwind, и править его можно как угодно. Заменил в разметке indigo на emerald, и тариф стал зелёным, как в конце ролика. У многих блоков есть тёмная версия. Написаны блоки под Tailwind 4, в проекте на третьей версии часть классов называется иначе. https://github.com/markmead/hyperui 🔥 — если было полезно @glo_academy | #инструменты

🦜 @glo_academy

⚡ Прогресс загрузки файла на fetch без XHR await fetch(url) возвращается, как только пришли заголовки. Тело ещё качается, и его можно читать по кускам через response.body.

const res = await fetch(url);
const total = +res.headers.get('Content-Length');
const reader = res.body.getReader();
const chunks = [];
let loaded = 0;
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  chunks.push(value);
  loaded += value.length;
  progress.value = loaded / total;
}

Каждый reader.read() приносит следующий кусок: складываешь длины, делишь на размер файла из Content-Length и двигаешь полосу загрузки. Так умеют Chrome с 43-й версии, Firefox с 65-й и Safari с 10.1. Если сервер сжимает ответ, в Content-Length окажется размер сжатого файла, а reader отдаёт распакованные байты, и прогресс уедет за 100%. Заголовка может и не быть, тогда показывай, сколько мегабайт уже скачано. Прогресс отправки так не посчитать, для неё по-прежнему берут XHR. 🔥 — если было полезно @glo_academy | #js_day

🎨 Тултип у края экрана переворачивается без JS Тултип над кнопкой обычно ставят через position: absolute и bottom: 100%. Стоит кнопке оказаться у верхнего края, и подсказка уезжает за экран. Раньше это чинили JS-библиотекой вроде Floating UI. Сейчас хватает CSS:

.button {
  anchor-name: --save;
}

.tooltip {
  position: absolute;
  position-anchor: --save;
  position-area: top;
  margin-bottom: 8px;
  position-try-fallbacks: flip-block;
}

anchor-name даёт кнопке имя, position-anchor привязывает к нему тултип, а position-area: top ставит его над кнопкой. Последняя строка нужна для края экрана: если сверху места не хватает, flip-block переносит тултип под кнопку. Отступ из margin-bottom переезжает вместе с ним. На гифке кнопка едет вверх. Слева старый способ: подсказку срезает край. Справа она переворачивается вниз. Пересчитывать позицию при скролле и ресайзе браузер тоже будет сам, без обработчиков в JS. Работает в Chrome 129+, Firefox 147+, Safari 26+. 🔥 — если было полезно @glo_academy | #css_day

🧰 svgo Экспортируешь иконку колокольчика из графического редактора, а файл весит почти 2 КБ. Нарисованы в нём две линии, остальное служебное: комментарий редактора, метаданные, пустые группы, скрытый слой и координаты вида 2.000000. Всё это браузер скачивает вместе с иконкой. svgo чистит файл одной командой npx svgo bell.svg. На ролике тот самый колокольчик: красным подсвечено то, что svgo удалит, жёлтым то, что перепишет короче. Было 1911 байт, стало 353, а иконка не изменилась. На странице с двадцатью такими иконками это около 30 КБ лишнего. Обычно svgo подключают к сборщику, и иконки чистятся сами при каждой сборке. svgo удаляет и переименовывает id внутри файла. Если твой CSS или JS находит части иконки по id, отключи в настройках плагин cleanupIds. https://github.com/svg/svgo 🔥 — если было полезно @glo_academy | #инструменты

🤳 @glo_academy

✂️ Шрифт как в нативном приложении без загрузки файлов Подключаешь красивый шрифт с сервера, и на медленном интернете человек первые секунды смотрит на пустые карточки. Браузер прячет текст, пока файл не догрузится, а потом перерисовывает страницу. Если шрифт не часть бренда, файл можно не грузить совсем.

body {
  font-family: system-ui, sans-serif;
}

system-ui берёт шрифт, который уже стоит у пользователя: San Francisco на macOS и iOS, Segoe UI на Windows, Roboto на Android. Текст виден с первого кадра, и сайт выглядит так же привычно, как приложения в этой системе. На гифке слева карточка ждёт свой шрифт, а справа текст на месте сразу. На каждой системе шрифт свой, поэтому ширина строк немного гуляет: проверяй вёрстку хотя бы на маке и на Windows. sans-serif в конце — запасной вариант для старых браузеров. Работает в Chrome 56+, Firefox 92+, Safari 11+. ❤️ — если было полезно @glo_academy | #snippets

🎨 Звёздочка у обязательного поля озвучится словами Ставишь звёздочку у обязательного поля через ::after — и незрячий пользователь слышит «Телефон звёздочка». Символ до него дошёл, а смысл нет: из «звёздочки» никак не следует, что поле обязательное. Чинится одной косой чертой.

.required::after {
  content: '*' / 'обязательное поле';
}

После значения в content ставь косую черту и пиши альтернативный текст. На экране остаётся та же звёздочка, а скринридер прочитает «Телефон обязательное поле». На гифке форма не меняется, меняется только то, что слышит пользователь: сначала «Телефон звёздочка», потом «Телефон обязательное поле». Так же чинится любой декор из content: галочка, стрелка в хлебных крошках. Если символ нужен только глазам, поставь после черты пустые кавычки, и скринридер его пропустит. Работает в Chrome 77+, Firefox 128+, Safari 17.4+. 🔥 — если было полезно @glo_academy | #css_day

📐 Лендинг жилого комплекса Макет средней сложности без адаптива на русском языке @glo_academy