css
(131)
Вертикальне і горизонтальне центрування за допомогою CSS3 transform
Центрувати елементи по горизонталі не складно, але вертикальне вирівнювання завжди було трохи заплутаним. У цій статті я покажу вам, як центрувати по вертикалі і по горизонталі за допомогою CSS3 transform. {full-post-img} Я створив для цього клас .c...
Codeguida · 13 січня 2020 · 21
Властивості Background
Кожен елемент в дереві документа - просто прямокутна коробка. Кожна з цих коробок має фон, який може бути повністю прозорим, кольоровим або зображенням. І цей бекграунд контролюється 8 властивостями CSS (плюс 1 коротка властивість). background-color...
Codeguida · 03 січня 2020 · 33
Способи додати CSS в JavaScript застосунок
Перед обговоренням такої неоднозначної теми як CSS в JS варто зрозуміти, що немає жорсткого правила, яке б встановлювало єдиний спосіб для обробки CSS в застосунках на React, Vue чи Angular. Кожен проєкт різний, а кожен метод має свої переваги та нед...
Codeguida · 18 липня 2019 · 59
Все, що ви колись хотіли знати про inputmode
Атрибут inputmode підказує браузеру, який тип екранної клавіатури показувати на мобільних пристроях, залежно від обраного input або textarea. <input type="text" inputmode="" /> <textarea inputmode="" /> На відміну від атрибута type, inputmode не втр...
Codeguida · 4 роки тому · 11
Інтро до Веб-компонентів
Фронтенд-розробка розвивається з шаленою швидкістю. Варто лише поглянути на численні статті, туторіали та треди у Twitter зі скаргами на технології, колись такі прості та зрозумілі. У цій статті ми з'ясуємо, чому для якісного користувацького досвіду...
Codeguida · 24 квітня 2019 · 28
Як працює @supports
В CSS є чудова фіча, що дає можливість перевірити чи підтримує браузер певну властивість чи пару властивість:значення перед застосуванням відповідних стилів (подібно до того, як @media-запити визначають певні СSS-стилі в залежності від розміру вікна...
Codeguida · 03 березня 2019 · 7
Позбавляємось зайвого CSS
Ні для кого не секрет: чим компактніший сайт, тим швидше він завантажується. Не дозволяйте непотрібному CSS обтяжувати ваші веб-проекти. Використовуйте спеціальні засоби та інструменти, і продуктивність вашого сайту зросте. Що таке зайвий CSS? Навіть...
Codeguida · 04 грудня 2018 · 25
Grid vs Flexbox: що обрати?
Попри деякі спільні риси, CSS Grid та CSS Flexbox використовуються для дуже різних завдань; кожна з цих технологій вирішує свій набір проблем. У статті ми розглянемо відмінності між цими техніками, дослідимо, як вони допомагають вирішувати різні проб...
Codeguida · 26 жовтня 2018 · 175
Оптимізація CSS: ID-селектори та інші міфи
Типовий веб-сайт сьогодні нараховує близько 500 КБ стиснутого JavaScript та 1.5 MБ зображень, що завантажуються за 400 мілісекунд на середньому Android-пристрої за допомогою 3G. Зважаючи на це, тривалість обробки CSS — найменша з незручностей. Тим не...
Codeguida · 13 липня 2018 · 20
CSS-змінні. Стратегія застосування
Динамічні властивості CSS дають можливість створювати креативні рішення, натомість значно ускладнюють структуру коду. Отримати максимум користі можливо, використовуючи стратегію структурування СSS з користувацькими властивостями . Користувацькі СSS-в...
Codeguida · 29 червня 2018 · 556
Скролінг в майбутнє
Можливість прогортати інформацію сприймається як належне всіма користувачами. Однак реалізувати скролінг, який добре працюватиме поміж браузерами й чудово вписуватиметься в дизайн, може бути непросто. Коли веб-стандарти розвиваються швидше, ніж коли-...
Codeguida · 22 червня 2018 · 41
Розширення нативних елементів DOM за допомогою веб-компонентів
Веб-компоненти (Web Components) пропонують потужні функції прямо з платформи. Основні з них: справжня інкапсуляція JS та CSS; взаємодія між різними фреймворками; і, звичайно, стандартизована компонентна модель для полегшеного повторного використання...
Codeguida · 12 червня 2018 · 10