Написание цвета grey (или grey) является распространенным источником путаницы для веб-разработчиков и дизайнеров. Оба написания относятся к одному и тому же бледному оттенку между черным и белым, но grey является предпочтительным написанием в американском английском, в то время как grey — в британском английском. Это несоответствие распространяется и на названия цветов CSS, причем и grey, и grey доступны в качестве допустимых значений ключевых слов. Так какое написание следует использовать для таких свойств CSS, как color, background-color, border-color и т. д.? Давайте подробнее рассмотрим вопрос gray vs grey в синтаксисе CSS.
CSS поддерживает 140 стандартных названий цветов, которые можно использовать вместо шестнадцатеричных кодов или значений RGB/HSL. Сюда входят основные цветовые термины, такие как красный, зеленый, синий, а также более конкретные оттенки, такие как орхидея, золотисто-желтый, кадетский синий и т. д. И серый, и серый включены в спецификацию названий цветов CSS:
| gray | #808080 |
| grey | #808080 |
Как вы можете видеть, серый и серый относятся к одному и тому же цвету — среднему оттенку серого с шестнадцатеричным значением #808080. Так что с точки зрения визуального результата выбор серого или серого не будет иметь никакого значения.
Однако есть еще несколько факторов, которые следует учитывать при принятии решения о том, какое написание использовать:
– **Соглашения по кодированию** — Большинство руководств по стилю США предпочитают серый цвет для кода CSS. Grey может не понравиться коллегам-разработчикам или инструментам линтинга.
– **Последовательность** – Выберите одно написание и придерживайтесь его во всей кодовой базе для последовательности. Избегайте смешивания grey и grey.
– **Аудитория** – Если вы создаете сайт для британской аудитории, grey может быть лучшим выбором.
Итак, вкратце, хотя оба варианта работают, grey является общепринятым написанием для CSS в США. Главное – выбрать один из них и использовать его последовательно.
Названия цветов grey и grey можно использовать везде, где разрешено стандартное значение цвета CSS. Вот несколько примеров:
**Цвет текста**
“`css
p {
color: gray; /* или color: grey; */
}
“`
**Цвет фона**
“`css
.box {
background-color: grey; /* или background-color: gray; */
}
“`
**Цвет границы**
“`css
button {
border: 1px solid grey; /* или border: 1px solid grey; */
}
“`
**Цвет тени**
“`css
.card {
box-shadow: 3px 3px 10px grey; /* или box-shadow: 3px 3px 10px gray; */
}
“`
**Цвет контура**
“`css
input:focus {
outline: 2px solid gray; /* or outline: 2px solid gray; */
}
“`
Таким образом, серый или серый можно использовать везде, где в CSS допустимо стандартное значение цвета. Это включает такие свойства, как:
– color
– background-color
– border-color
– outline-color
– box-shadow
– fill (для элементов SVG)
– stroke (для фигур SVG)
Выбор сводится к соглашениям о кодировании и последовательности.
В дополнение к стандартным названиям цветов CSS также поддерживает функции фильтров gray() и grey(). Они позволяют применять эффекты оттенков серого к другим цветам.
Например:
“`css
img {
filter: grayscale(100%); /* Сделайте изображение черно-белым */
}
img {
filter: gray(50%); /* Сделайте изображение 50%-ным в оттенках серого */
}
img {
filter: grey(80%); /* 80%-ный оттенок серого с помощью grey() */
}
“`
Как и названия цветов, gray() и grey() работают одинаково для применения фильтров оттенков серого в CSS. Единственное отличие — в написании.
Однако функции gray()/grey() предлагают больше гибкости, чем просто #808080 средний серый, предоставляемый ключевыми словами цвета. Передавая процентное значение, вы можете применять более светлые или темные оттенки серого:
“`css
/* 10% серого */
фильтр: серый(10%);
/* 30% серого */
фильтр: серый(30%);
/* 60% серого */
фильтр: серый(60%);
/* 100% серого (черного) */
фильтр: серый(100%);
“`
Это позволяет вам выбирать определенные оттенки серого/серого для эффекта фильтра оттенков серого.
Итак, вкратце:
– gray() и grey() работают одинаково
– Поддерживает проценты для более светлых/темных оттенков
– Обеспечивает большую гибкость, чем названия серых/серых цветов
Опять же, соглашения о кодировании должны определять, какое написание вы выбирайте.
Учитывая, что серый и серый относятся к одному и тому же цвету, они имеют одинаковую поддержку браузеров:
| Браузер | Поддержка |
|---|---|
| Chrome | 1+ |
| Edge | 12+ |
| Firefox | 1+ |
| Safari | 1+ |
| Opera | 3.5+ |
Все основные браузеры поддерживают как серый, так и серый цвет имена. Поэтому нет проблем с совместимостью браузеров при выборе одного из них.
Функции фильтра gray()/grey() также хорошо поддерживаются:
| Браузер | Поддержка |
|---|---|
| Chrome | 57+ |
| Edge | 79+ |
| Firefox | 70+ |
| Safari | 12+ |
| Opera | 44+ |
Поддержка браузеров gray()/grey() отличная во всех современных браузеры. Так что смело используйте эти фильтры, не беспокоясь о совместимости.
Подводя итог, все основные браузеры поддерживают оба варианта написания одинаково хорошо, поэтому совместимость браузера не должна влиять на ваш выбор между серым и серым.
Основываясь на обсуждаемых моментах, вот несколько лучших практик, когда дело доходит до выбора серого или серого для кода CSS:
– **Предпочитайте серый** – Большинство руководств по стилю США указывают серый как предпочтительное написание для CSS.
– **Будьте последовательны** – Выберите серый или серый и придерживайтесь его во всем коде. Не смешивайте и не сопоставляйте.
– **Соответствуйте аудитории** – Для сайтов в Великобритании серый может быть лучшим выбором.
– **Используйте gray()** – Функция фильтра gray() обеспечивает наибольшую гибкость.
– **Обращайтесь к руководствам** – Следуйте конкретному руководству по стилю вашего проекта/компании.
– **Игнорируйте браузеры** – Все браузеры поддерживают оба варианта написания, поэтому не беспокойтесь о совместимости.
Соблюдение этих рекомендаций поможет вам сохранить использование серого/серого единообразным, читабельным и общепринято правильным.
Хотя серый и серый относятся к одному и тому же цвету в CSS, выбор между этими двумя вариантами написания может вызвать путаницу. Помните, что серый является общепринятым для CSS в США, в то время как серый предпочтительнее в Великобритании. Чтобы ваш код оставался понятным, выберите одно написание и придерживайтесь его последовательно во всем CSS. Поддержка браузерами обоих терминов превосходна, поэтому вам не нужно беспокоиться о совместимости. Используйте гибкие фильтры gray()/grey(), когда требуется более тонкий контроль над оттенками серого. Учитывая эти советы, вы можете принять обоснованное решение об использовании серого или серого в вашем коде CSS.