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

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

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

От автора: мы собираемся реализовать зафиксированный заголовок, в котором при прокрутке автоматически выделяется каждый раздел, когда пользователь прокручивает их. Мы воспользуемся несколькими хуками. Раньше до добавления 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-файл загружается и анализируется — и то, и другое вызывает потенциальные задержки. Конечно, по крайней мере ...

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

7 основных трендов CSS в 2019 году

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

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

Как изменять цвета с помощью элемента ввода color и переменных CSS

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

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

Фантастические веб-спецификации и где они обитают

Многие разработчики, что уж скрывать, недолюбливают спецификации. Одни считают их скучными. Другим они вообще кажутся монстрами, не иначе как порожденными мифической Ехидной (невероятно, но это отчасти правда: именно так — Echidna — называется система автопубликации, используемая в W3C). Новичка они могут запутать, как лешие, заманить в ловушку, как сирены, и озадачить неразрешимыми загадками, как Сфинкс. Зато о тех, кто проник ...

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

Почему большинство разработчиков боятся CSS

От автора: как ни странно, многие боятся начинать работу с CSS. Сначала в моей команде было два фронт-энд разработчика. Это был я и старший фронт-энд разработчик. Затем старший фронт-энд разработчик уволился, и я остался единственным фронт-энд разработчиком в команде. И это было хорошо. Я делал свою работу, и все было в порядке. Мы провели несколько собеседований, но никто нам не ...

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

Архитектура CSS — структура папок и файлов

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

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