Главная » Архив меток: CSS

Архив меток: CSS

Некоторые вещи, которые вы должны знать при работе с единицами измерения

От автора: Дэвид Чейнин написал обобщенную статью с кратким изложением проблемы, связанной с установкой значения height элемента в 100vh в мобильных браузерах и последующим размещением чего-то внизу. Посмотрите на изображение ниже: Проблема в том, что Chrome не учитывает адресную строку, когда определяет, как сжимать элемент, что приводит к тому, что нижняя часть элемента оказывается фактически вне нижнего края окна просмотра. ...

Читать далее »

Необычные случаи использования псевдо-элементов

От автора: псевдо-элементы используются уже в течение длительного времени. Тем не менее, есть некоторые случаи использования, которые, как мне кажется, не полностью известны разработчикам. Я написал эту статью, чтобы пролить свет на них, и чтобы их можно было использовать больше. Эффект «наведение родитель-потомок» Поскольку псевдо-элемент принадлежит своему родительскому элементу, для этого есть несколько необычных вариантов использования. А пока давайте рассмотрим ...

Читать далее »

Фокус на front-end: темный режим

От автора: когда мы переходим в 2020 год, у Front-end разработчиков появилась еще одна отличная возможность в наборе функций веб-приложений, с которым нам приходится сталкиваться.   Адаптивность для мобильных устройств, планшетов и настольных ПК Поддержка различными браузерами (устаревшими и другими) Проблемы доступности Прогрессивные веб-приложения SEO Оптимизация производительности т. д. и т. п. Теперь у нас есть Dark Mode (темный режим). ...

Читать далее »

Тренды CSS 2019: Полное руководство

От автора: постоянное обновление в соответствии с последними тенденциями является обязательным условием для успеха сайта, и поэтому важно определять, что помогает или мешает развитию вашего сайта. Создание идеального веб-сайта полностью зависит от навыков проектирования, потому что веб-сайт — это искусство, сочетающее в себе технические аспекты. Поэтому уникальные макеты, сложные анимации и другие микро-взаимодействия, могут изменить внешний вид вашего веб-сайта. Удивительный ...

Читать далее »

Современный сброс CSS

От автора: я наслаждаюсь очень скучными CSS-вещами — честно говоря, возможно, гораздо больше, чем должен бы. Одна вещь, на которую я, вероятно, потратил слишком много времени, это сброс CSS. В современную эпоху веб-разработки нам на самом деле не нужен сложный сброс или даже сброс вообще, потому что проблемы совместимости CSS с браузером возникают гораздо реже, чем в дни IE 6. ...

Читать далее »

Фиксированный заголовок с выделенными разделами при прокрутке

От автора: мы собираемся реализовать зафиксированный заголовок, в котором при прокрутке автоматически выделяется каждый раздел, когда пользователь прокручивает их. Мы воспользуемся несколькими хуками. Раньше до добавления CSS position: sticky реализация фиксированного заголовка была огромной болью. Поддержка некоторых сценариев (таких как заголовки таблиц и т. д.) была на низком уровне, но вы можете узнать больше об этом на веб-сайте caniuse. Настройка ...

Читать далее »

Субпиксельный рендеринг и обводки

От автора: я был невероятно счастлив, что смог недавно выступить на первом Talk.CSS в Мельбурне, и после этого у меня был хороший разговор с одним из участников о проблемах субпиксельного рендеринга для тонких обводок CSS в разных браузерах. Во время своего выступления я очень кратко затронул тему субпиксельного рендеринга при освещении свертывания полей. Если у вас есть полностью пустой блок, ...

Читать далее »

Работа с несколькими столбцами — CSS Multi-column Layout

От автора: несмотря на то, что он предшествовал Grid and Flexbox, Multi-column Layout в CSS представляет собой — по крайней мере, для меня — еще более радикальный отход от того, что мы обычно делаем, и как думаем о макете CSS. Разделение только одного элемента на его многоколоночное представление содержимого кажется странным, даже еретическим. Установка многостолбцового контекста означает, что контент (поток) ...

Читать далее »

Использование пользовательских атрибутов CSS, сгенерированных JavaScript, в качестве механизма передачи

От автора: за последние несколько итераций CSS границы между CSS и JavaScript начали стираться. CSS был статическим языком, предназначенным для определения цветов, внешнего вида, но не интерактивности. Вы можете использовать проценты в измерениях как своего рода интерактивность для окружающей среды, но реакция на изменения была прерогативой JavaScript. В прежние времена HTML создавал структуру, CSS-стиль, а JavaScript — интерактивность. Или, как ...

Читать далее »

Самый простой способ асинхронной загрузки CSS

От автора: одной из наиболее эффективных вещей, которые мы можем сделать для повышения производительности и устойчивости страниц, является загрузка CSS способом, который не задерживает рендеринг страниц. Это связано с тем, что по умолчанию браузеры загружают внешний CSS-файл синхронно — блокируя весь рендеринг страницы, пока CSS-файл загружается и анализируется — и то, и другое вызывает потенциальные задержки. Конечно, по крайней мере ...

Читать далее »