Статьи с тегом «CSS»

FrontendCSS

Повышение эффективности кодирования с соглашениями об именовании CSS

Соглашения об именовании CSS улучшают взаимодействие членов команды при работе над проектами, повышают сопровождаемость и масштабируемость проекта, позволяя разработчикам оптимизировать свои рабочие процессы. В этой статье мы погрузимся в мир соглашений об именовании CSS, покажем практические примеры и преимущества, которые они дают в процессе разработки.
FrontendCSS

Написание CSS в 2023 году: Отличается ли он от того, что было раньше?

CSS развивается быстрее, чем когда-либо. С учётом всех новых возможностей, которые появились — и ещё появятся — после появления Flexbox и Grid несколько лет назад, меняется и способ написания CSS. В этой статье Geoff Graham рассказывает о том, какие функции оказали наибольшее влияние на его нынешние подходы к CSS, а также о тех, которые не оказали (по крайней мере, пока).
FrontendCSS

Как избежать CSS-сдвигов макета связанных с ch

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

Преимущества пользовательских свойств в CSS

Пользовательские свойства CSS, известные как переменные, — это мощная функция, позволяющая разработчикам определять многократно используемые значения в таблицах стилей. Использование пользовательских свойств позволяет значительно повысить удобство повторного использования и сопровождения кода, а также создавать динамические стили для своих веб-проектов. Цель данной статьи — всесторонне объяснить пользовательские свойства CSS и их применение с помощью функции var.
FrontendJavaScriptCSSHTML

Как реализовать пагинацию с помощью HTML, CSS и JavaScript

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

Рефакторинг CSS: Оптимизация размера и производительности (часть 3)

Рефакторинг кодовой базы должен привести к аналогичной или повышенной производительности и улучшению состояния кодовой базы. В конце концов, если развёртывание обновлённой базы вызовет проблемы с загрузкой или производительностью, это приведёт к снижению трафика и доходов. К счастью, существует множество методов оптимизации, которые можно применить для решения потенциальных проблем с размером файлов и производительностью.
FrontendCSS

Понимание логических свойств CSS

Логические свойства CSS — эффективный способ управления макетом веб-страниц. С течением времени CSS развивался в соответствии с требованиями современного веб-дизайна, и одним из значительных достижений последних лет стало появление логических свойств CSS. В этой статье мы познакомимся с логическими свойствами CSS, покажем, что они собой представляют, чем отличаются от традиционных (физических) свойств и почему они важны для создания гибких и отзывчивых макетов.
FrontendCSS

Освоение z-index в CSS

z-index — свойство, используемое для управления порядком расположения слоёв в документе. Элементы с большим значением z-index располагаются над элементами с меньшим значением. Подобно тому, как оси x и y на странице определяют расположение элементов по горизонтали и вертикали, z-index определяет, как они располагаются друг над другом по оси z.
FrontendCSS

Рефакторинг CSS: Стратегия, регрессионное тестирование и сопровождение (часть 2)

В этой статье мы подробно рассмотрим сам процесс рефакторинга, стратегию инкрементного рефакторинга, визуальное регрессионное тестирование и сопровождение отрефакторенной кодовой базы.
FrontendCSS

Рефакторинг CSS: Введение

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

Повторное использование кода: Освоение SCSS-миксинов

Миксины SCSS обеспечивают эффективный способ повторного использования CSS-кода. Миксины уменьшают дублирование и улучшают структуру кода за счёт инкапсуляции стилей в блоки многократного использования. Благодаря возможности принимать аргументы, миксины становятся невероятно адаптивными и универсальными. В этой статье мы расскажем о том, как SCSS-миксины улучшают разработку фронтенда, способствуя модульности и согласованности кода, и упрощая написание CSS.
FrontendCSS

Руководство по стилизации полосы прокрутки в CSS

В этой статье мы рассмотрим несколько способов стилизации полосы прокрутки в CSS, в разных браузерах, чтобы вы могли настроить полосу прокрутки по умолчанию в соответствии с вашим брендом или дизайном.
FrontendCSS

Как использовать CSS background-size и background-position

Со свойствами фона CSS можно сделать очень многое. В этой статье мы рассмотрим, как использовать свойство background-size для установки размера фонового изображения, а также изучим варианты позиционирования фонового изображения с помощью background-position.
FrontendCSS

Как использовать CSS aspect-ratio

Бывают случаи, когда действительно необходимо поддерживать определённое соотношение между шириной и высотой отзывчивых элементов на веб-странице. Долгое время это можно было сделать с помощью различных CSS-трюков. Свойство CSS aspect-ratio изменило ситуацию: теперь мы можем задавать соотношение сторон элемента в одной строке кода. Давайте рассмотрим, как использовать свойство aspect-ratio.
FrontendCSSHTML

Mobile-First подход с HTML и CSS

В современном цифровом ландшафте подход, ориентированный на мобильные решения (mobile-first), приобрёл большое значение в веб-дизайне и разработке. Применяя подход mobile-first в HTML и CSS, вы отдаёте приоритет потребностям мобильных пользователей и обеспечиваете бесперебойную и увлекательную работу вашего сайта на небольших экранах. В этой статье мы расскажем о принципах и преимуществах mobile-first дизайна и реализации конкретных стратегий в HTML и CSS, чтобы вы могли применить эту методику.
FrontendCSS

Техники рефакторинга CSS

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

Написание более чистого CSS кода с помощью БЭМ

Чистый и организованный код имеет решающее значение в современных веб-проектах, и разработчики постоянно ищут способы улучшить удобство сопровождения и организации кода. К счастью, для достижения этой цели существуют различные методы, включая популярную методологию Блок Элемент Модификатор (БЭМ), и в этой статье объясняется, как работает БЭМ и почему вы должны начать его применять.
FrontendCSS

Тригоно­метриче­ские функции в CSS

В дополнение к математическим функциям CSS были добавлены тригонометрические функции sin(), cos(), tan(), asin(), acos(), atan() и atan2(). Эти функции определены в модуле Значения и единицы измерения CSS уровня 4 и доступны во всех браузерах.
FrontendCSS

Что такое CSS маски и зачем они нужны

В мире дизайна маскирование — популярная техника достижения уникальных дизайнерских эффектов. Как дизайнер, я использовал его много раз, но редко использую в Интернете. Думаю, причина, по которой я не использую CSS маски, заключается в поддержке браузеров. Они частично поддерживаются в браузерах blink (Chrome и Edge) и полностью поддерживаются в Safari и Firefox.
TailwindCSSFrontend

Рассмотрим Tailwind CSS

В этом году было много шумихи вокруг популярного CSS фреймворка Tailwind. Хочу поделиться мыслями и опасениями по поводу UI этого фреймворка. У меня был небольшой опыт написания utility-first CSS кода, когда я начинал свою карьеру во фронтенде несколько лет назад.
CSSFrontend

Защитный CSS — коллекция сниппетов

Часто хочется, чтобы был способ избежать возникновения определённой проблемы или поведения CSS. Вы знаете, что контент динамический, и на веб-странице всё может измениться, что увеличивает вероятность возникновения проблемы с CSS или странного поведения.
CSS

CSS: Современные селекторы псевдоклассов

Проект черновика рабочей группы CSS для Selectors Level 4 включает несколько селекторов псевдоклассов, которые уже поддерживаются в большинстве современных браузеров. В этом руководстве будут рассмотрены те из них, которые имеют наилучшую поддержку, а так же приведены примеры, демонстрирующие как вы можете их использовать уже сейчас.
CSSFrontend

CSS: Соотношение сторон или aspect-ratio

Важно иметь постоянное соотношение ширины и высоты изображений и других отзывчивых элементов. Мы много лет использовали в CSS хак с отступами, но сейчас у нас есть встроенная поддержка соотношения сторон в CSS. В этой статье я расскажу, что такое соотношение сторон, как мы его использовали и как это делать по-новому. Конечно, будут варианты использования с подходящими запасными вариантами.
CSSFrontend

CSS: Отзывчивые макеты, меньше CSS медиа запросов

Мы не можем говорить о веб-разработке, не упоминая Отзывчивый Дизайн. В наши дни это просто данность, и так было уже много лет. Медиа запросы — часть отзывчивого дизайна, и они никуда не денутся. С момента появления медиа-запросов (буквально десятилетия назад) CSS эволюционировал до такой степени, что существует множество трюков, которые могут нам помочь существенно сократить количество медиа-запросов. В некоторых случая я покажу вам, как заменить несколько медиа-запросов только одним CSS объявлением. Эти подходы могут привести к уменьшению объёма кода, упрощению обслуживания и большей степени привязаны к имеющемуся контенту.
CSSFrontend

CSS: Анимация подчёркивания ссылок

Недавно я добавил в этот блог простой визуальный эффект, который мне быстро понравился: когда вы наводите курсор на ссылку, анимированное подчёркивание ссылки раскрывается из центра. Создать этот эффект на удивление легко и не требует добавления каких-либо дополнительных элементов в DOM HTML.