CSS Shorthand vs. Longhand — Что использовать
Сокращения и Longhand — один краткий, а другой точный. Один появился из-за стремления к краткости, а другой твердо стоит на страже ясности. В любом случае, у них есть свои цели, плюсы и минусы, так сказать.
В этом посте будут освещены как сокращенные обозначения CSS, так и сокращенные обозначения, а также будет сделан вывод о том, какой вариант лучше использовать для какой ситуации.
Что такое сокращенная собственность?
Сокращенное свойство — это свойство, которое принимает значения для других наборов свойств CSS. Например, мы можем присвоить значение для border-width, border-style и border-color, используя только свойство border.
В принципе,
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
граница: 1px сплошной синий;
такой же как:
ширина границы: 1px;
стиль границы: твердый;
цвет бордюра: синий;
Увидеть перо zGNKex Прети (@rpsthecoder) на CodePen,
При этом нам не нужно объявлять отдельные значения свойств отдельно (что является избыточным, требует много времени и пространства). Он также сбрасывает пропущенные свойства в объявлении, что может быть использовано в качестве преимущества.
Как это работает?
Как уже упоминалось ранее, мы записываем набор других значений свойств в сокращенной форме, порядок не имеет значения, если все значения свойств в сокращенной записи имеют другой вид, как в border. Для свойств с аналогичными значениями, такими как margin, порядок имеет значение. Если сомневаешься, помни по часовой стрелке!
Теперь, что если мы пропустим свойство или два в объявлении? В приведенном выше примере, скажем, мы игнорировали стиль границы.
рамка: 1px синяя;
Увидеть перо OVWRdv Прети (@rpsthecoder) на CodePen,
Мы больше не сможем видеть границы, не потому, что свойство стенографии не работает, а потому что стиль границы, который мы пропустили, получил значение по умолчанию none. Вот как это сокращенное свойство получено.
граница: 1px нет синего цвета;
Теперь давайте отбросим 1px для border-width и оставим остальные два:
граница: сплошная синяя;
Увидеть перо YXNGBV Прети (@rpsthecoder) на CodePen,
Мы сможем видеть границы, только с более широкой шириной, и это потому, что свойство border-width получило значение по умолчанию medium.
рамка: средняя сплошная синяя;
Для нас это делает вывод, что когда значение свойства не указывается в кратком объявлении, это свойство принимает значение по умолчанию (даже если оно должно переопределить любое предыдущее значение, назначенное для того же самого).
Если есть border-width: 1px; для элемента где-то перед границей: сплошной синий; для этой же ширины границы будет средняя (значение по умолчанию), а не 1px.
Еще одна вещь, о которой стоит упомянуть, это то, что мы не можем использовать значения, такие как наследовать, начальные или неустановленные, которые доступны для всех свойств CSS, в сокращенной записи. Если мы используем их, браузер не сможет точно знать, какое свойство это значение должно представлять в стенографии — вся декларация будет удалена.
Вся собственность
Существует одно сокращенное свойство CSS, которое может устанавливать значение для всех свойств CSS. Значения в масштабах CSS, наследующие, начальные и неустановленные, применимы ко всем свойствам, и, следовательно, это единственные значения, принимаемые всем свойством.
div {
все: начальный
}
Это заставит элемент div отказаться от ВСЕХ значений свойств CSS, которые у него были, и сбросит значение по умолчанию в каждом из них.
⚠ Предупреждение
Давайте не будем злоупотреблять всем имуществом. Необходимость в этом может возникнуть только в очень редких случаях, когда мы не можем прикоснуться к какому-либо предыдущему коду CSS элемента, к которому мы хотим применить это свойство.
Примечание. Цвет свойства CSS принимает шестнадцатеричное значение с сокращенной записью, если два числа шестнадцатеричного значения в каждом цветовом канале совпадают. Например, фон: # 445599; такой же, как фон: # 459 ;.
Что такое произвольное свойство?
Отдельные свойства, которые могут быть включены в сокращенное свойство, называются произвольными свойствами. Некоторые примеры: background-image, margin-left, анимация-длительность и т. д.
Почему мы должны использовать это?
Хотя краткие альтернативы удобны, у них есть недостаток. Помните, в начале мы видели, как стенография переопределяет любые пропущенные свойства с их значениями по умолчанию? Это может быть проблемой, если сброс не требуется.
Возьмем, к примеру, свойство сокращенного шрифта. Давайте использовать его в элементе h4 (который имеет стиль шрифта браузера по умолчанию font-weight: полужирный)
шрифт: 20px «новый курьер»;
В приведенном выше сокращенном коде значение свойства font-weight отсутствует, поэтому значение font-weight: bold (стиль браузера по умолчанию) будет переопределено значением по умолчанию font-weight: normal, в результате чего элемент h4 потеряет свой полужирный стиль. , который, возможно, не был предназначен.
Увидеть перо BNpLvx Прети (@rpsthecoder) на CodePen,
Таким образом, для приведенного выше примера идеально подходят два простых свойства: font-size и font-family.
Кроме того, использование сокращения для назначения только одного или двух значений свойств не очень полезно. Зачем давать браузеру дополнительную работу, чтобы интерпретировать каждое свойство (включая пропущенные) в стенографии, когда для работы требуется только одно?
Помимо разработки, на этапе разработки некоторые разработчики (особенно начинающие) могут найти использование рукописных обозначений намного проще для работы, чем сокращение для лучшей читаемости и ясности.
Вывод
В настоящее время с возможностью быстрого кодирования (с помощью таких инструментов, как Emmet) и минимизации высокая надежность для сокращения не требуется, но в то же время очень логично набирать margin: 0 ;.
Контекст, в котором мы предпочитаем наши нотации CSS, будет меняться, и все, что нам нужно сделать, — это выяснить, какая нотация будет работать лучше для нас и когда.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)