css
(131)
20 порад для написання сучасного CSS
В цьому пості ми поділимося колекцією з 20 порад та кращих практик, що зроблять ваш CSS набагато кращим 1. Остерігайтеся Margin Collapse На відміну від інших властивостей, вертикальні відступи (margin) при зустрічі конфліктують. Це означає, що коли н...
Codeguida · 11 листопада 2021 · 47
Інклюзивні компоненти: картки
Деякі з компонентів, які розглядаються в блозі Хейдона Пікерінґа, мають задокументовані рекомендації для коректної роботи. Наприклад, стандарт WAI-ARIA передбачає певну структуру і поведінку для вкладок. Наскільки точно слідувати цим рекомендаціям —...
Codeguida · 26 лютого 2020 · 45
Зміна SVG іконок
Метод №1: сховати/показати SVG елемент Включаємо обидві іконки: <a class="expand-link" href="#0"> <svg class="icon icon-expand" viewBox="0 0 32 32"><use xlink:href="#icon-expand"></use></svg> <svg class="icon icon-contract" viewBox="0...
Codeguida · 15 липня 2020 · 44
Локальні CSS змінні: що, як і навіщо
Кастомні CSS властивості (також відомі як CSS змінні) вже тут. Нарешті маємо справжні змінні в CSS! Що я маю на увазі під справжніми змінними? Це змінні, що можуть бути перевизначені динамічно у файлі. Хоча ми вже мали «змінні», дякуючи пре/пост-проц...
Codeguida · 18 липня 2017 · 43
Sass vs LESS vs Stylus: Вибір препроцесора
Напевно багато з вас чули про CSS препроцесор. Писати код, використовуючи його потужні можливості - справді чудово і захоплююче. Та що ж таке той препроцесор? Який препроцесор обрати? Сьогодні ми в цьому розберемося. В цій статті ми розглянемо деякі...
Codeguida · 06 січня 2021 · 43
Скролінг в майбутнє
Можливість прогортати інформацію сприймається як належне всіма користувачами. Однак реалізувати скролінг, який добре працюватиме поміж браузерами й чудово вписуватиметься в дизайн, може бути непросто. Коли веб-стандарти розвиваються швидше, ніж коли-...
Codeguida · 22 червня 2018 · 41
Гід по оптимізації веб-сторінок та додатків
Коли справа доходить до продуктивності, ми не маємо права примушувати користувачів чекати і залишити веб-сторінку з негативними враженнями. Оптимізація є основою професійного створення сайту. Що визначає швидкість сторінки? Можна виділити наступні пу...
Codeguida · 27 червня 2021 · 38
CSS font-display: Майбутнє рендерингу шрифтів у вебі
Одним із недоліків використання веб-шрифтів, є те, що у випадку недоступності шрифту на пристрої користувача, його необхідно завантажувати. Це означає, що до того як шрифт стане доступним, браузер повинен вирішити як відобразити будь-який блок тексту...
Codeguida · 19 листопада 2017 · 35
Властивості Background
Кожен елемент в дереві документа - просто прямокутна коробка. Кожна з цих коробок має фон, який може бути повністю прозорим, кольоровим або зображенням. І цей бекграунд контролюється 8 властивостями CSS (плюс 1 коротка властивість). background-color...
Codeguida · 03 січня 2020 · 33
Веселощі з CSS лічильниками
CSS лічильники – це одна з тих цікавих можливостей про, які аж хочеться сказати: «Ого, не знав, що на CSS можна таке зробити». Простіше кажучи, вони дозволяють вам рахувати елементи по-порядку – без JavaScript. Базовий лічильник Ось це – простий прик...
Codeguida · 23 листопада 2020 · 33
Front-end воїн - Scroll Progress
Сьогодні ми розглянемо кілька методів демонстрації прогресу прокрутки веб- сторінки. Ця техніка використовується на багатьох сайтах, і не дарма; вона забезпечує контекстуальне розуміння кількості інформації даної сторінки. Коли користувач виконує про...
Codeguida · 13 грудня 2021 · 32
Введення в SVG анімацію за допомогою SMIL
На Sitepoint нещодавно був розміщений виклик - відтворити цю забавну GIF анімацію за допомогою HTML і CSS: Це виглядає дуже просто, але це важко зробити без великої кількості ключових кадрів. Я схилявся до SVG, але вже давно хотів дати можливість SM...
Codeguida · 05 квітня 2021 · 32