Современная веб-разработка динамична. Вы можете создать веб-страницу Hello World, которая запускается в вашем любимом браузере, используя менее пяти тегов. Это захватывающе и вдохновляюще — видеть быстрые результаты и быстрое выполнение кода, который мы изучили несколько часов назад. Однако, как бы просто это ни казалось на первый взгляд, современный веб-дизайн и разработка требуют большого терпения и искусного кодирования. Относительно незначительный недостаток может привести к тому, что ваши элементы будут плавать в произвольном положении. Применение приемов CSS — один из самых простых способов улучшить веб-дизайн и устранить глюки пользовательского интерфейса.
При разработке веб-приложений дизайнеры и разработчики должны помнить о проблемах совместимости с кросс-браузерами, а также о бесчисленном множестве существующих сегодня экранов. К сожалению, все это трудно уловить новичку.
Если код становится более объемным, он начинает создавать множество зависимостей. Кроме того, такие коды трудно отлаживать, что только увеличивает затраты и время организации или отдельных людей. В таких сценариях приемы CSS могут творить чудеса, поскольку они помогают улучшить общий внешний вид, интерактивные возможности и доступность веб-страницы или веб-сайта.
В этой статье перечислены 11 спасительных приемов CSS, о которых следует помнить при написании веб-кода. Эти приемы помогут вам создать надежные веб-сайты и улучшить пользовательский опыт.
Новичок в селекторах CSS? Ознакомьтесь с этой шпаргалкой Ultimate CSS Selector, чтобы сделать карьеру веб-дизайнера более успешной.
Давайте начнем с лучших трюков CSS!
Знаете ли вы, что делает правило CSS @ apply? Оно позволяет применять набор свойств CSS с помощью именованной переменной вместо встроенного набора свойств.
- Клубные элементы с одинаковыми стилями
- Используйте проценты вместо абсолютных чисел
- ::до и ::после контента
- position: absolute CSS
- Принудительное применение CSS через !important
- Используйте переменные
- Изгибание текста по границе изображения
- Исследуйте возможности конических градиентов
- Изучите селекторы
- Повышение удобства использования с помощью :visited и :link
- Стилизация первой буквы
- Проверка совместимости вашего CSS с браузерами
- Каковы ваши личные приемы CSS?
Клубные элементы с одинаковыми стилями
Начнем с одного из основных и наиболее часто используемых трюков CSS при разработке веб-кода. Много раз ваши элементы могут иметь одинаковые стили в CSS.
Например, ниже показан снимок сайта Pizza Hut.
Он имеет два элемента в центре — Delivery и Takeaway. Это два отдельных блока «div». Вы можете щелкнуть правой кнопкой мыши на любом из них и проинспектировать, чтобы узнать их классы.
Эти «div» имеют много общего, особенно их стилизация — шрифт, размер шрифта, фон, цвет шрифта и многое другое. Но они различаются в своей реализации, потому что это два отдельных элемента с точки зрения веб-разработки. Если вы выбираете один из них, некоторые вещи происходят в фоновом режиме и меняются, но стилизация остается прежней.
Для таких элементов, где многие стили должны быть одинаковыми, лучше объединить их в один сниппет.
Предположим, что два класса: «tab-delivery» и «tab-takeaway».
CSS-код для двух классов, «tab-delivery» и «tab-takeaway», приведен ниже.
<style>
.tab-delivery {
font-size: 16px;
font-family: "Times New Roman", Times, serif;
background-color: white;
}
.tab-takeaway {
font-size: 16px;
font-family: "Times New Roman", Times, serif;
background-color: white;
}
</style>
Ниже приведен комбинированный CSS-код для двух классов «tab-delivery» и «tab-takeaway».
<style>
.tab-delivery, .tab-takeaway {
font-size: 16px;
font-family: "Times New Roman", Times, serif;
background-color: white;
}
</style>
Основное преимущество написания CSS-кода в комбинированном виде заключается в реализации методологии DRY в нашем коде. Таким образом, в будущем, если кто-то предложит изменить цвет шрифта, вам не придется искать классы и цвет шрифта всех элементов в тысячах строк CSS. Достаточно внести всего одну правку, и все готово.
Используйте проценты вместо абсолютных чисел
Как начинающий пользователь, одной из первых ваших забот будет позиционирование элементов на веб-странице. Поскольку большинство веб-сайтов начинают с определения ширины элементов в пикселях, зачастую неизбежно придется начать размещать эти числа в коде.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Absolute Numbers</title>
</head>
<style>
div {
background-color: #e7e7e7;
width:500px;
height: 100px;
font-weight: bold;
font-size: 28px;
}
</style>
<body>
<div> Hi!! I am a div box and I am awesome. </div>
</body>
</html>
Приведенный выше код создает на веб-странице элемент шириной 100 пикселей с примененным цветом фона.
Однако у этого подхода есть недостаток. Это работает хорошо, поскольку вы разработали его в соответствии с вашим экраном и протестировали его.
А что если теперь отобразить ту же веб-страницу на мобильном устройстве?
Наш бокс не полностью отображается на мобильном устройстве, как это было на настольном компьютере, где мы его тестировали.
Кроме того, когда мы отображаем веб-страницу на планшете, например, iPad Pro, как показано ниже, размер div-блока составляет половину размера экрана.
На настольном компьютере (в зависимости от разрешения) он занимал бы менее ⅓ экрана. Эту проблему легко определить, поскольку здесь расположен только один элемент. Однако разработка полной веб-страницы на рабочем столе и проверка множества элементов удивит вас.
CSS-хитрость, позволяющая избежать таких сюрпризов, заключается в использовании процентных значений вместо абсолютных чисел. Для того же кода изменим ширину с 500px на 30% следующим образом:
width:30%;
На рабочем столе представление div остается прежним. Но обратите внимание, как оно меняется на том же мобильном устройстве, выбранном, как показано выше.
За исключением уродливой части text-overflow на скриншоте выше, обратите внимание, что поле div по-прежнему занимает 30% ширины устройства. Это чрезвычайно полезно для решения проблем совместимости браузеров и создания единообразного веб-сайта.
::до и ::после контента
Многие элементы на вашем сайте будут избыточными. Например, у вас может быть стандартный размер шрифта для элемента H2 на всей странице или даже на сайте. Чтобы избежать повторяющегося кода, мы используем CSS и применяем стиль в одном месте. Однако разработчики вряд ли довольствуются одним элементом. Они придумывают креативные методы, чтобы каждый элемент выделялся. В результате получаются уникальные дизайны, как показано ниже.
Другой пример такого дизайна показан ниже.
Жесткое кодирование этих элементов стиля (читаемые и стильные кавычки) многократно на каждом элементе не является хорошей практикой. Даже если кто-то захочет изменить цвет кавычек, будет сложно внести изменения в сотни уже созданных вами кавычек.
О размещении чего-либо до или после любого элемента в HTML заботятся псевдоэлементы :: before и ::after в CSS.
Допустим, я хочу поместить местоположение перед заголовками всех новостей и текст «читать далее» после содержания. Я могу действовать в следующем направлении:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Absolute Numbers</title>
</head>
<style>
#texas::before {
content: "texas";
font-size: 12px;
color: orange;
}
#washington::before {
content: "washington";
font-size: 12px;
color: orange;
}
.news::after {
content : "Read More...";
color: red;
}
</style>
<body>
<h2 id="texas">XYZ to hold a new event in texas </h2>
<p class="news"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h2 id="washington">XYZ to hold a new event in texas </h2>
<p class="news"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>
Результат, отображенный на платформе LambdaTest на виртуальной машине, выглядит следующим образом:
Обратите внимание, как местоположение появляется «до» основного заголовка и знак «Читать далее…» «после» него. Как я уже сделал выше, вы также можете стилизовать эти компоненты с помощью свойств размера и цвета шрифта.
position: absolute CSS
Свойство CSS position очень полезно при позиционировании элементов на веб-странице. Оно может быть статичным, «липким» CSS, абсолютным, относительным и фиксированным. Эти значения служат различным целям при определении местоположения элемента. Среди них значение позиции absolute — это то, знание которого поможет вам в вашей карьере веб-разработчика. Оно дает вам больше контроля над элементами и выводит их из обычного потока документа.
Элемент с позицией, установленной как абсолютная, может быть позиционирован в фиксированном месте для всех ситуаций, с которыми вы столкнетесь при кроссбраузерном тестировании. Однако элемент будет занимать позицию относительно первого предка, у которого свойство установлено как абсолютное или относительное. Если такого элемента не существует, позиция будет определяться по корневому элементу, то есть HTML.
Следующий код размещает два div-бокса с одним из них в качестве position: absolute.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Position Absolute</title>
</head>
<style>
div.relative {
position: relative;
width: 300px;
height: 250px;
border: 2px solid #000000;
}
div.absolute {
position: absolute;
top: 70px;
right: 10px;
width: 150px;
height: 80px;
border: 2px solid #000000;
}
</style>
<body>
<div class = "relative">My position is relative.
<div class = "absolute">My position is absolute.</div>
</div>
</body>
</html>
Вывод осуществляется следующим образом.
Вывод на мобильных устройствах.
Важно помнить, что элемент с позицией absolute не влияет на другие элементы. Он также не влияет ни на какой другой элемент, что может создать проблемы с дизайном в дальнейшем, если вы не будете осторожны.
Принудительное применение CSS через !important
Иногда вы можете столкнуться с необходимостью по-разному реализовать одно или два свойства для нескольких разделов на веб-странице. Однако, поскольку эти новые разделы содержат большинство свойств, соответствующих другим разделам (которые имеют все свойства), копирование CSS всего с парой изменений может увеличить повторяемость. Следовательно, мы принудительно применяем CSS с помощью ключевого слова !important.
Следующий код записывает пять заголовков в H2, причем четвертый отличается по цвету из-за принудительного применения CSS.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Position Absolute</title>
</head>
<style>
h2 {
color: #0d23e0;
}
.special {
color: #d90d2f !important;
}
</style>
<body>
<h2> I am Heading #1 </h2>
<h2> I am Heading #2 </h2>
<h2> I am Heading #3 </h2>
<h2 class = "special"> I am Heading #4 </h2>
<h2> I am Heading #5 </h2>
</body>
</html>
Если убрать специальный код, содержащий ключевое слово !important, то четвертая строка также будет отображаться на странице синим цветом.
Рекомендуется не использовать это свойство в CSS-коде, который вы пишете. У новичка может возникнуть соблазн быстро принудительно изменить несколько свойств, когда все идет не так, как вы ожидаете. Такой подход может создать проблемы в дальнейшем, и код станет трудно отлаживать.
Применяйте ключевое слово «важно» только в тех случаях, когда это необходимо, и вы будете знать полный порядок действий.
Знаете ли вы? Свойство CSS Backdrop Filter обеспечивает эффект фильтрации фонового изображения CSS, который заставляет элементы ниже целевого элемента применять фильтры или эффекты к фоновому изображению.
Используйте переменные
Переменные, лучше всего определяемые как переменные CSS, уменьшают одно и то же значение по всему сайту в разных случаях. Вы можете использовать их в случаях, противоположных использованию ключевого слова !important.
Например, мы используем !important, когда нужно изменить только пару свойств. В то же время мы используем переменные, когда только пара свойств одинаковы (размер шрифта или цвет), а остальные отличаются в зависимости от раздела. Это не жесткое и быстрое правило, но хороший способ запомнить. Поэтому считайте, что вы применяете 20px везде на сайте для разных разделов в качестве размера шрифта.
Изменение этого значения может увеличить затраты на обслуживание и отладку и потратить много времени. Поэтому вместо этого мы можем просто объявить переменную со значением 20px и использовать ее везде. Тогда в следующий раз, когда произойдут какие-либо изменения, мы сможем изменить значение переменной, и все наши изменения будут отражены на всей странице.
Следующий HTML-код реализует тот же случай, что и рассмотренный выше,
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Position Absolute</title>
</head>
<style>
:root {
--my_font: 20px;
}
.class1 {
font-size: var(--my_font);
}
.class2 {
font-size: var(--my_font);
}
</style>
<body>
<h2> I am Heading #1 </h2>
<h2 class = "class1"> I am Heading #2 </h2>
<h2 class = "class2"> I am Heading #3 </h2>
</body>
</html>
Переменные CSS — это чрезвычайно эффективный метод, позволяющий сделать ваш код более удобным для работы.
Изгибание текста по границе изображения
Различные подходы к дизайну фокусируются на управлении пространством на веб-странице. Я часто встречаю одно из таких требований — размещение изображения с текстом вокруг него. Это дает эффект, подобный тому, что наблюдается в газетных материалах. Это также используется для придания привлекательности веб-странице, не акцентируя внимание на изображении. В некотором смысле, изображение часто не слишком уместно. Если вы начинающий или опытный веб-разработчик, это становится довольно сложной задачей, если вы начинаете кодировать элементы обводки текста и позиционирования (если это возможно!).
Одним из приемов CSS является использование свойства shape-outside в CSS. Оно определяет форму и корректирует содержимое, прилегающее к этому изображению. Если вы нацелились на прямоугольное изображение, вы можете легко сделать это с помощью других свойств. Особенно для кругов и эллипсов, shape-outside является спасителем.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Position Absolute</title>
</head>
<style>
.curved_text {
float:left;
shape-outside: circle(50%);
width: 200px;
height: 200px;
}
</style>
<body>
<div class = "curved_text"></div>
<p>
<!-- Place content here →
</p>
</body>
</html>
Вывод
Вы можете поместить любое круглое изображение как воздушный шар и изогнуть содержимое вокруг него. Этот трюк CSS несомненно поможет вам создать солидный дизайн в пару строк CSS-кода в вашем следующем проекте.
Исследуйте возможности конических градиентов
Градиенты CSS — это мощный способ визуализации более чем одного цвета на экране. Они создают плавный переход между цветами, что придает уникальный дизайн элементу и, в конечном итоге, вашему сайту. Поскольку линейные и радиальные градиенты уже давно существуют, в большинстве мест в интернете вы найдете только эти два вида градиентов. Модуль CSS Image values and replaced content module level 4 описывает еще один функциональный градиент — конический градиент.
Конический градиент в CSS вращает цветовые переходы от центра круга. Цвет конического градиента заканчивается на границе круга, а не излучается из центра с разным радиусом.
Круговые диаграммы являются отличным примером конических градиентов.
Следующий простой код делит круг на четыре сегмента, напоминающие круговую диаграмму:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Conical Gradient</title>
</head>
<style>
.conic-grad {
background: conic-gradient(red 25%, blue 0 50%, yellow 0 75%, black 0);
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>
<body>
<div class = "conic-grad"></div>
</body>
</html>
Вывести
Однако это лишь простая демонстрация конических градиентов. Они также могут создать красивый переход с помощью всего одной строки кода, как показано ниже:
background: conic-gradient(cyan, magenta, yellow, black);
Выход
Изучите селекторы
После работы над множеством веб-приложений и связанных с ними технологий, одна из моих рекомендаций как веб-разработчика — изучить селекторы. Селекторы — это отличный способ применять CSS-стили только при выполнении определенных условий (или отношений). Хотя с его помощью можно выбрать любой элемент на веб-странице (например, каждый тег p), выделение отношений делает его полезной и модной функцией.
Такие селекторы, как «+», «>» и «~», являются основными в этом разделе. Однако если вы ищете всю информацию о селекторах CSS, вы можете прочитать это полное руководство.
Селектор «+» называется селектором смежных братьев и сестер. Если в качестве правила записано a + b, то учитывается только первая b, которая появляется после закрытия тега.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Adjacent selector</title>
</head>
<style>
div + h3 {
color: red;
}
</style>
<body>
<div>
<h3>I am not adjacent</h3>
<h3>Me neither</h3>
</div>
<h3>I am adjacent</h3>
</body>
</html>
Если «+» выбирает только соседний селектор, то «~» выбирает всех братьев и сестер. Селектор «>» называется дочерним селектором и выбирает все дочерние элементы. Таким образом, a > b выберет все b, которые являются дочерними элементами a. Использование селекторов дает вам контроль над элементами с логикой в соответствии с отношениями между ними. Как только вы освоите их, вы заметите, сколько времени они экономят.
Повышение удобства использования с помощью :visited и :link
Как веб-разработчик, вы должны помнить об удобстве использования. Оно должно быть одним из самых приоритетных, поскольку пользовательский опыт — это единственное, что будет поддерживать ваш бизнес и сайт. Одной из проблем, вызывающих беспокойство, является отсутствие следов перехода по ссылкам на веб-странице. Это может запутать пользователя, и он может нажать на одну и ту же ссылку дважды (возможно, через несколько дней). Google сам применяет фиолетовый цвет ко всем ссылкам, которые открыл пользователь, чтобы сэкономить его время и улучшить впечатления. Подобное требуется и в веб-дизайне и достигается с помощью псевдоклассов :visited и :link.
Стиль псевдокласса :link применяется к непосещаемым ссылкам, а псевдокласс :visited применяется к посещаемым ссылкам.
Следующий код демонстрирует то же самое.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Pseudo Class</title>
</head>
<style>
a:visited{
color: red;
}
a:link{
color:blue;
}
</style>
<body>
<h2><a href= "[https://www.lambdatest.com](https://www.lambdatest.com)">Redirect to LambdaTest</a></h2>
</body>
</html>
Стилизация первой буквы
Поскольку CSS с каждым новым обновлением становится все более эффективным и потрясающим, давайте поделимся еще одним простым приемом CSS для веб-разработчиков.
При написании нового заголовка, начале нового абзаца или любого контента, если это имеет значение, веб-разработчики оформляют первую букву предложения уникальным образом. Это довольно сложно сделать, используя несколько элементов span и задавая разные стили для самого левого элемента. Но все это можно сделать с помощью всего одного псевдоэлемента.
Псевдоэлемент ::first-letter, введенный CSS, берет только первую букву целевого (или выбранного) элемента и применяет CSS. Поскольку это другой псевдоэлемент, нам не нужно создавать несколько элементов или отдельный код CSS.
Следующий код применяет больший размер шрифта, больший font-weight и красный цвет к первому элементу каждого абзаца на веб-странице.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Pseudo Class</title>
</head>
<style>
p::first-letter {
color: red;
font-weight: bold;
font-size:29px;
}
.news_box {
width: 40%;
height: 30%;
text-align: justify;
}
</style>
<body>
<center>
<div class="news_box">
<h2> Can cross-browser testing solve your browser testing problems?</h2>
<p> Your content
</p>
</div>
</center>
</body>
</html>
Вывод
Проверка совместимости вашего CSS с браузерами
При разработке программного обеспечения кросс-браузерная совместимость жизненно важна, так как каждый веб-сайт должен идеально работать на различных платформах ОС и браузерах. Однако при реализации свойств CSS вы можете столкнуться с ситуацией, когда большинство браузеров не поддерживают такие функции HTML/CSS, как аудио и видео, CSS Grids, CSS Flexbox и т. д. То же самое относится и к браузеру Internet Explorer, поскольку он не поддерживает CSS Selectors, CSS Namespaces и т.д. Другими распространенными проблемами могут быть совместимость с различными устройствами, сбои в выравнивании веб-страниц, вариации реализации JavaScript и так далее.
После внедрения вышеперечисленных свойств CSS в веб-сайты необходимо провести кроссбраузерное тестирование, чтобы убедиться, что они безупречно работают в различных браузерах, устройствах и операционных системах. Вы можете выбрать облачную платформу тестирования, например, LambdaTest, которая предлагает онлайн ферму браузеров из 3000+ реальных браузеров и операционных систем для тестирования ваших веб-сайтов (и веб-приложений) на наличие проблем с HTML/CSS и определения того, какие функции не работают в каких браузерах, и мгновенного их устранения.
Ниже приведена реализация CSS Variables в браузере Safari под управлением macOS Monterey.
Вы также можете вывести проекты на облако реальных устройств LambdaTest, чтобы протестировать их на мобильных устройствах и проверить, как они работают в условиях реального пользователя. LambdaTest также предоставляет сайты для тестирования на эмуляторах Android и симуляторах iOS.
Ознакомьтесь с видеоуроком по тестированию в реальном времени в браузере.
Подпишитесь на YouTube-канал LambdaTest и будьте в курсе последних уроков по веб-тестированию, CI/CD, отзывчивому тестированию, автоматизированному тестированию браузера и многому другому.
Ниже показана реализация переменной CSS на реальном устройстве — iPhone 13 Mini под управлением iOS 15.
В дополнение к браузерному тестированию CSS, вы можете использовать LT Browser — эмулятор отзывчивых веб-сайтов от платформы LambdaTest для проведения мобильного отзывчивого тестирования CSS на различных предварительно созданных видовых экранах, таких как мобильный, планшетный, настольный и ноутбук. Для получения более подробной информации вы можете обратиться к нашему блогу о возможностях LT Browser для разработчиков.
Ознакомьтесь с видеоинструкцией по работе с LT Browser.
Ниже показан мобильный вид сайта и планшетный вид для переменных CSS.
Знаете ли вы, что делает CSS background-blend-mode? Это свойство позволяет смешивать фоновое изображение, градиент или цвет CSS с содержимым элемента.
Каковы ваши личные приемы CSS?
От стилизации элемента до анимации и переходов, CSS предоставляет полный пакет услуг для разработчика. Однако, как и любой другой язык программирования, вы можете выполнить все задачи с помощью CSS, изучив лишь простые вещи.
Например, вы можете скопировать-вставить размер шрифта в несколько элементов и заставить его работать. В этом посте мы рассмотрели 11 трюков CSS, которые могут сделать вашу работу более доступной, чем когда-либо. Они не сделают что-то уникальное, как новое свойство, но сократят десятки и двадцать строк до одного простого кода CSS.
Я уверен, что вы и сами наверняка сталкивались с несколькими хаками и трюками. Так давайте в разделе комментариев расскажем, какие трюки с CSS вам больше всего понравились в этом посте.