CSS initial основные проблемы использования начальных значений в коде


Содержание материала:

Что такое использование «начального» значения в CSS?

Я думал, что initial значение восстановит первоначально отображаемые стили (как применяется обозревательС user-agent таблица стилей).

Я ожидал div.inline правила отображения

но когда я исследую это,

2 ответов

на initial стоимостью (не атрибут) обозначает начальное значение свойства, как определено в спецификациях CSS: «ключевое слово ‘initial’ представляет указанное значение, которое обозначается как начальное значение свойства.»Таким образом, его значение зависит от свойства, но не от чего-либо еще, например, не от браузера или элемента, к которому применяется свойство. Так оно и есть не среднее значение браузера по умолчанию.

например, для display собственность initial всегда означает inline , потому что это обозначенное начальное значение свойства. В случае примера,по умолчанию is block , так как элемент div .

таким образом, initial значение имеет ограниченную полезность. Его основной эффект, по-видимому, смущает людей из-за недопонимания. Возможный вариант использования-для color свойство, так как его начальное значение зависит от браузера (в основном черный, как мы знаем, но не обязательно). За это, initial означает браузер по умолчанию, так как это свойство было определено, аналогичный вариант использования для font-family : путем объявления font-family: initial , вы получаете шрифт по умолчанию (который может зависеть от настроек браузера).

полезность дополнительно ограничена отсутствием поддержки на IE (даже IE 10).

начальное ключевое слово CSS применяет начальное значение свойства к элементу. Он разрешен для каждого свойства CSS и заставляет элемент, для которого он указан, использовать начальное значение свойства.

Использование наследования в CSS3

28 июля 2015 | Опубликовано в css | Нет комментариев »

Легко упустить из вида свойство каскадности таблицы стилей. Многие разработчики знакомы со значением inherit (наследование), но есть еще несколько свойств наследования CSS3, о которых знают не все.

property: inherit;

Значение наследования означает: «Использовать то значение, которое присвоено родительскому элементу». Если значение не было однозначно задано родительскому элементу, то браузер будет искать выше по дереву документа, пока свойство не будет найдено. Если свойство так и не будет найдено, применится значение браузера по умолчанию. Пример кода CSS:

На практике значение наследования пригождается редко. Многие наиболее полезные свойства автоматически распространяются на дочерние элемента, например свойства шрифтов, размеров шрифта, цвета текста и т. п.

Значение наследования безопасно использовать в любых браузерах. Оно не поддерживается в старых версиях браузера Internet Explorer, таких как 6 и 7, но маловероятно, что сайт перестанет от этого работать.

property: initial;

Новое значение CSS3, начальное значение, возвращает свойство к значению, заданному браузером по умолчанию, например:

Полезно ли это значение? Возможно, хотя нельзя ожидать, что у всех браузеров одинаковое значение по умолчанию.

Это значение поддерживается во всех современных версиях браузеров: Chrome, Firefox, Safari и Opera от версии 15. Начальное значение не поддерживается в браузере Internet Explorer, но сложно представить ситуацию, где это стало бы серьезной проблемой.

property: unset;

Это несколько необычное свойство. При использовании незаданного значения, применится наследуемое значение, если оно есть. Если его нет, например, если незаданное значение у ненаследуемого свойства тени блока, то применится начальное значение, т. е., значение браузера по умолчанию.

Правда, трудно представить, где может пригодиться незаданное значение, и оно не очень широко поддерживается браузерами.

all: [ inherit | initial | unset ];

И последнее свойство, а не значение, которое называется все. Ему можно задать значения наследования, начальное или незаданное, чтобы повлиять сразу на все свойства, например, вернуть все свойства CSS к значениям браузера по умолчанию:

Это может быть альтернативой для файла стилей с ограниченной областью действия, если на страницу добавляются сторонние модули и нужно избежать конфликта стилей.

К сожалению, не все браузеры пока что поддерживают это свойство, но со временем оно может стать широко используемым.

Пользовательские свойства CSS

Опрос Эшли Нолана в ноябре 2020 года показал, что 84% фронтенд-разработчиков используют CSS-препроцессор. В то же время самой полезной возможностью препроцессоров разработчики считают переменные. Это неудивительно. Переменные помогают упорядочить код, избежать дублирования, улучшают читаемость, делают проще рефакторинг.

У препроцессорных переменных есть ограничения: они ничего не знают о структуре DOM, не работают в псевдо-классах и медиа-запросах, их нельзя прочитать или изменить с помощью JavaScript.

Но главный недостаток препроцессоров — стили нужно компилировать, нельзя запустить код сразу в браузере.

На эту тему рекомендуем посмотреть доклад Вадима Макеева «Мой ванильный CSS»

Пользовательские свойства CSS (CSS custom properties) выполняют функцию нативных переменных в CSS и не имеют указанных ограничений. А с недавних пор они поддерживаются всеми современными браузерами. В этой статье мы научимся объявлять и использовать пользовательские свойства.

Объявление и использование

Объявить пользовательское свойство можно с помощью двойного дефиса (—):

Вы можете спросить, а почему не @ как в LESS, или $ как в Sass, ведь это гораздо приятнее глазу? Такой синтаксис позволяет использовать нативные переменные вместе с любым препроцессором, и они не будут компилироваться и попадут в неизменном виде в результирующий CSS.

Автор спецификации Таб Аткинс в своем блоге объясняет выбор синтаксиса для пользовательских свойств.

Если мы используем $ foo для переменных, мы не сможем использовать его для будущих «похожих на переменные» вещей.

Имя пользовательского свойства чувствительно к регистру. Свойство —main-color — это не то же самое, что —Main-color .

Значением пользовательского свойства может быть любое допустимое в CSS значение: цвет, строка, ключевое слово, даже выражение.

Допустимо даже такое значение свойства:

С точки зрения CSS это некорректное значение, но его потенциально можно прочитать и обработать из JavaScript. Это открывает простор для фантазии разработчиков.

Получить значение пользовательского свойства можно с помощью функции var().

Обратите внимание на второй аргумент функции var(). Его значение выполняет роль фоллбэка и применяется, когда переменная не определена. В качестве фоллбэка может использоваться значение другой переменной:

В примере выше мы намеренно не задали значение переменной с помощью выражения —color:; . Это означает, что переменная объявлена, но не определена. Не путайте с —color: ; — здесь значением переменной является пробел, а это некорректное значение.

Значение пользовательского свойства можно использовать для объявления другого свойства.

Значения пользовательских свойств можно складывать, вычитать, умножать и делить с помощью функции calc() .

Область видимости и наследование

Переменные в Sass, как и в других препроцессорах, существуют вне селектора. Такие переменные считаются глобальными. Пользовательские свойства можно объявлять только внутри селектора. Этот селектор ограничивает область видимости свойства. Спецификация рекомендует использовать псевдо-класс :root для объявления глобальных пользовательских свойств.

Пользовательские свойства подчиняются правилам каскада и наследуются до последнего потомка.

Использование ключевых слов

Пользовательские свойства CSS подчиняются тем же правилам, что и обычные свойства. Это означает, что вы можете назначить им одно из ключевых слов:

  • inherit — применяется значение родительского элемента.
  • initial — применяется начальное значение, определенное в спецификации CSS (пустое значение или ничего для пользовательских свойств CSS).
  • unset — применяется унаследованное значение, если свойство наследуется (как в случае пользовательских свойств) или начальное значение, если свойство не наследуется.
  • revert — сбрасывает свойство к значению по умолчанию, установленному таблицей стилей браузера (пустое значение в случае пользовательских свойств).

Установить для всех свойств начальное значение можно с помощью свойства all :

Но этот способ не применяется для пользовательских свойств. В сообществе идет обсуждение возможности сбросить значения всех переменных с помощью свойства — , но это пока только дискуссия:

Отличия пользовательских свойств от препроцессорных переменных

Несколько отличий пользовательских свойств от препроцессорных переменных мы уже рассмотрели в предыдущих разделах. Самое очевидное отличие: пользовательские свойства не нужно компилировать, их значения обрабатываются браузером.

Значения пользовательских свойств подставляются во время выполнения, поэтому могут изменяться «на лету» и использоваться в медиа-запросах.

— IMG —
Крис Койер показал пример использования пользовательских свойств в медиа-запросах.

По той же причине препроцессорные переменные не могут использоваться в псевдо-классах, а пользовательские свойства прекрасно с этим справляются.

Поскольку пользовательские свойства CSS — это такие же свойства, доступ к ним можно получить из JavaScript с помощью API CSSStyleDeclaration.

Поддержка

Desktop

Chrome Opera Firefox IE Edge Safari
49 36 31 No 15 9.1

Mobile

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
9.3 37 No 56 57 52

Если вам нужна поддержка старых браузеров, можно использовать пользовательские свойства параллельно с препроцессорными, а поддержку проверять с помощью директивы supports :

Можно трансформировать код с CSS-переменными, например, с помощью плагина postcss-custom-properties. Но, в отличие от компиляции препроцессором, плагин позволяет сохранить переменные м вызовы функции var() для тех браузеров, которые их поддерживают.

Дополнительные материалы

Отличные подробные статьи на английском языке:

Также советуем посмотреть доклад Павла Ловцевича «Пользовательские свойства как основа архитектуры CSS» с FrontTalks, где он подробно рассказывает о том, почему пользовательские свойства крутые.

В Firefox с 2014 года, в Chrome и Safari с марта 2020 года, в Edge с апреля 2020 года (Источник: CanIUse)

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

7 советов по обработке «undefined» в JavaScript

Когда новички начинают изучать JavaScript, они иногда сталкиваются с одной интересной проблемой. Они зачастую не могут понять разницу между undefined и null . Ведь null и undefined представляют собой пустые значения. Даже операция сравнения null == undefined выводит true . Давайте попробуем разобраться в том, что из себя всё-таки представляет undefined .

Введение

Большинство современных языков вроде Ruby, Python и Java имеют только одно значение null ( null или nill ), что совершенно логично.

В случае с JavaScript интерпретатор возвращает undefined при попытке доступа к переменной или свойству объекта, которые ещё не былы заданы. Пример:

Что же касается null , это значение представляет собой ссылку на отсутствующий объект. В JavaScript не устанавливается значение null для переменных или свойств объекта.

Некоторые встроенные методы, такие как String.prototype.match() , могут возвращать значение null для обозначения отсутствующего объекта:

Поскольку в JavaScript у разработчиков есть возможность получить доступ к неинициализированным значениям, это может вызвать некоторые ошибки.

«КРОК», Москва, Троицк, Санкт-Петербург, Нижний Новгород, Самара, Иркутск, Пермь, Краснодар, Воронеж, Челябинск, от 120 000 до 240 000 ₽

Часто такие действия приводят к ошибке, связанной с неверным использованием undefined , что ломает весь скрипт. Наиболее часто при этом возникают следующие ошибки:

  • typeError: undefined is not a function ( undefined не является функцией);
  • typeError: Cannot read property ‘

‘ of undefined (невозможно прочитать ‘

‘ свойство undefined );

  • другие подобные ошибки.
  • А иронию этой шутки может понять только JavaScript-разработчик:

    Чтобы избежать ошибок, связанных с undefined , нужно понимать, когда эта ошибка может возникать, и снизить риски ее появления в вашем приложении.

    Что такое undefined

    В JavaScript есть 6 примитивных типов:

    • Boolean. У этого типа есть два значения: true (истина) и false (ложь). Как правило, логический тип boolean используется для хранения значения вроде да/нет.
    • Number. Тип число используется как для целых, так и для дробных чисел (1, 6.7, 0xFF);
    • String. В JavaScript любые текстовые данные являются строками. В JavaScript нет разницы между двойными и одинарными кавычками: var text = «строка» / var texts = ‘строки’ ;
    • Symbol. Новый примитивный тип данных Symbol служит для создания уникальных идентификаторов: Symbol(«name») (начиная с ES2015);
    • Null. Значение null не относится ни к одному из типов выше, а образует свой отдельный тип, состоящий из единственного значения null ;
    • Undefined. Значение undefined , как и null , образует свой собственный тип, состоящий из одного этого значения. Если переменная объявлена, но в неё ничего не записано, то её значение как раз и есть undefined (значение не присвоено).

    Отдельно от всех стоит тип Object (объект), который используется для организации данных и объявления более сложных сущностей. Пример:

    Объект может иметь любые свойства до тех пор, пока они находятся внутри фигурных скобок <. >.

    Среди этих 6 примитивных типов undefined является специальным значением. Согласно спецификации ECMAScript, undefined используется тогда, когда переменной не присвоено значение.

    Этот стандарт четко определяет, что значение undefined можно получить при доступе к неинициализированным переменным, несуществующим свойствам объекта, несуществующим элементам массива и тому подобному. Например:

    Пример выше показывает, что undefined выводится при попытке доступа к:

    • неинициализированной переменной number ;
    • несуществующему свойству объекта movie.year ;
    • несуществующему элементу массива movies[3] .

    Оператор typeof возвращает строку undefined для неопределенного значения:

    Оператор typeof отлично подходит для проверки значения undefined у переменной:

    Что влияет на появление undefined

    Неинициализированная переменная

    Объявленная переменная, которая еще не имеет значения (не инициализирована), по умолчанию undefined .

    Переменная myVariable уже объявлена, но еще не имеет присвоенного значения. Попытка обратиться к переменной закончится выводом undefined .

    Эффективный подход к решению проблем неинициализированных переменных — это по возможности присвойте им начальное значение. Чем меньше переменная существует в неинициализированном состоянии, тем лучше. В идеале вы сразу же присваиваете значение myVariable = ‘initial’ (начальное значение), хотя это не всегда возможно.

    Отдавайте предпочтение const и let, а от var нужно постепенно отказываться

    Некоторые разработчики считают, что одной из лучших особенностей ECMAScript 2015 является новый способ объявления переменных путём использования const и let . Это большой шаг вперед, так как объявленные таким способом объекты/переменные находятся в области видимости, ограниченной текущим блоком кода (в отличие от старого оператора var ), и находятся во временной мертвой зоне до момента присвоения им конкретного значения.

    При использовании неизменяемых данных (констант) рекомендуется инициализировать их как const . Это создаст неизменную связку.

    Одна из приятных особенностей const заключается в том, что вы должны задать начальное значение константы. Пример:

    Таким образом, константа не подвергается неинициализированному состоянию, и получить значение undefined просто невозможно.

    Давайте протестируем функцию, которая проверяет, является ли слово палиндромом:

    Переменным length и half значение присваивается один раз. В этом случае объявить их как const будет логично, так как их значение не будет меняться.

    Если вам нужно будет менять значение переменной несколько раз, то обозначьте ее как let . По возможности сразу присваивайте ей начальное значение. Пример:

    А когда использовать var ? Некоторые разработчики, ссылаясь на стандарт ES2015, предлагают перестать использовать var .

    Проблема использования var заключается в так называемом поднятии переменных (англ. variable hoisting). Где бы ни находилось объявление, это равнозначно тому, что переменную объявили в самом начале кода.

    В этом случае переменная myVariable содержит undefined до получения значения:

    Если же переменную объявить как let , то она останется недоступной до момента присвоения ей значения. Это происходит из-за того, что переменная находится во временной мертвой зоне. В этом случае вероятность получения значения undefined близится к нулю.

    Вышеприведенный пример с let (вместо var ) выведет ReferenceError , потому что переменная во временной мертвой зоне недоступна.

    Использование const или let для неизменяемых привязок позволит снизить риски получения значения undefined при написании кода.

    Усильте связность

    Связность характеризует степень взаимосвязанности элементов модуля (пространства имен, класса, метода, блока кода). Есть два вида связанности — сильная и слабая.

    Сильная связность предпочтительнее, поскольку она предполагает, что элементы модуля должны фокусироваться исключительно на одной задаче. Это поможет модулю быть:

    • сфокусированным и понятным — становится легче понять, какую задачу выполняет модуль;
    • легко поддерживаемым и поддающимся рефакторингу — изменение модуля влияет на меньшее количество элементов;
    • многоразовым — если модуль ориентирован на выполнение одной задачи, то его легче использовать повторно;
    • простым для тестирования — вам будет проще протестировать модуль, ориентированный на одну задачу.

    Сильная связность, сопровождающаяся слабым зацеплением, является характеристикой хорошо спроектированной системы.

    Блок кода сам по себе может считаться небольшим модулем. Чтобы извлечь выгоду из преимуществ сильной связности, нужно держать переменные как можно ближе к блоку кода, который их использует.


    Например, если переменная нужна только для использования в определенном блоке кода, тогда можно объявить её и разрешить существовать только внутри нужного блока (используя const или let для объявления).

    Одним из классических примеров излишнего срока жизни переменных является использование цикла for внутри функции:

    index , item и length — эти переменные объявляются в начале тела функции. Однако они используются только ближе к концу функции. Так в чем проблема с таким подходом?

    Всё время между объявлением переменной в начале и до использования её в цикле for переменные index и item не инициализируются и выводят undefined . По этому примеру видно, что срок жизни переменной является необоснованно длинным.

    Разумнее будет переместить переменные ближе к месту их применения:

    Переменные index и item существуют только в области действия блока for . У них нет никакого значения за его пределами.

    Переменная ( const ) length объявляется в месте ее использования.

    Почему модифицированная версия лучше первоначальной? Посмотрим:

    • значения не подвергаются неинициализированному состоянию, поэтому нет риска получения undefined ;
    • перемещение переменных ближе к месту их использования увеличивает читаемость кода;
    • элементы с высокой связанностью кода легче рефакторить и извлекать при необходимости в отделенные функции.

    Доступ к несуществующему свойству

    При доступе к несуществующему свойству объекта JavaScript возвращает undefined .

    Обратите внимание на пример:

    favoriteMovie — это объект с одним значением title . Доступ к несуществующему свойству actors путём использования favoriteMovie.actors приведет к выводу undefined .

    Сам по себе доступ к несуществующему свойству не вызывает ошибки. Реальная проблема возникает при попытке получить значение из несуществующего свойства. Это сообщение об ошибке отражает наиболее распространенную ловушку, связанную с undefined :

    Немного изменим предыдущий фрагмент кода, чтобы пояснить поведение TypeError :

    В favoriteMovie нет свойства actors , поэтому использование favoriteMovie.actors приведет к undefined .

    В результате доступ к элементу со значением undefined с помощью выражения favoriteMovie.actors [0] вызывает TypeError .

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

    К сожалению, не всегда возможно контролировать объекты, с которыми приходится работать. Такие объекты могут иметь разный набор свойств в различных сценариях. Таким образом, нужно обрабатывать все эти сценарии вручную.

    Попробуем реализовать функцию append(array, toAppend) , которая добавляет в начале и/или в конце массива новые элементы. Параметр toAppend принимает объект со свойствами:

    • first : элемент, вставленный в начале массива;
    • last : элемент, вставленный в конец массива.

    Функция возвращает новый экземпляр массива, не изменяя исходный (т.е. это чистая функция).

    Функция append() может выглядеть так:

    Поскольку объект toAppend может удалять первые или последние свойства, необходимо проверить, существуют ли эти свойства в toAppend .

    Доступ к свойству приведет к получению undefined , если его не существует. Можно проверить существует ли первое или последнее свойство, чтобы избежать undefined . Как вариант, это можно сделать с помощью условий if(toAppend.first)<> и if(toAppend.last)<> .

    Но не будем торопиться. В этом подходе есть серьезный недостаток. undefined , также как false , null , 0 , NaN и ‘ ‘ являются ложными значениями (falsy values).

    В текущей реализации append() функция не позволяет вставлять ложные элементы:

    0 и false — ложные значения, потому что if (toAppend.first) <> и if (toAppend.last) <> фактически сравниваются с ложными значениями и эти элементы не вставляются в массив. Функция возвращает исходный массив [10] без изменений.

    Последующие подсказки объясняют, как правильно проверить существование свойства.

    Проверьте, существует ли свойство

    К счастью, JavaScript предлагает множество способов определить, имеет ли объект определенное свойство:

    • obj.prop !== undefined позволяет сравнивать объект напрямую с undefined ;
    • typeof obj.prop !== ‘undefined’ проверяет тип значения свойства;
    • obj.hasOwnProperty(‘prop’) проверяет объект на наличие собственного свойства;
    • ‘prop’ in obj проверяет объект на наличие собственного или унаследованного свойства.

    Рекомендацией в этом случае будет использование оператора in . У него простой и понятный синтаксис. Присутствие оператора in указывает на четкое намерение проверить, имеет ли объект определенное свойство, не обращаясь к фактическому значению этого свойства.

    Использование obj.hasOwnProperty(‘prop’) — это также неплохое решение. Оно немного длиннее, чем оператор in , и проверяет только собственные свойства объекта.

    Эти два способа сравнения с undefined могут сработать… Но кажется, что использование obj.prop !== undefined и typeof obj.prop !== ‘undefined’ является не очень хорошим решением и может привести к непонятным последствиям при прямом сравнении с undefined .

    Давайте попробуем улучшить функцию append(array, toAppend) , используя in оператора:

    ‘first’ in toAppend ( как и ‘last’ in toAppend ) выводит true , независимо от существующего свойства. В других случаях выводится — false .

    Использование оператора in устраняет проблему со вставкой ложных элементов 0 и false . Теперь добавление элементов в начале и в конце массива [10] приводит к ожидаемому результату [0, 10, false] .

    Выполните деструктурирование доступа к свойствам объекта

    При доступе к свойству объекта иногда необходимо указать значение по умолчанию, если свойство не существует.

    Можно использовать in с тернарным оператором, чтобы получить следующий результат:

    Использование синтаксиса тернарного оператора становится сложным, когда число проверяемых свойств увеличивается. Для каждого свойства нужно создать новую строку кода, чтобы обработать значение, увеличивая опасную кучу похожих тернарных операторов.

    Чтобы использовать более простой подход, давайте познакомимся с функцией ES2015, называемой деструктурирование объекта.

    Деструктурирование объекта позволяет напрямую извлекать значения свойств объекта непосредственно в переменные и устанавливать значение по умолчанию, если свойство не существует. Это удобно использовать для исключения прямого контакта с undefined .

    Действительно, извлечение свойств теперь выглядит совершенно по-другому:

    Чтобы увидеть это в действии, определяем полезную функцию, обертывающую строку в кавычки. quote(subject, config) принимает первый аргумент как строку, которую нужно обернуть. Второй аргумент config — это объект со следующими свойствами:

    • char — символ цитаты, например, ‘ (одинарная кавычка) или » (двойная кавычка). По умолчанию — » ;
    • skipIfQuoted — логическое значение, чтобы пропустить цитирование, если строка уже цитируется. По умолчанию — true .

    Применяя преимущества деструктурирования объекта, давайте реализуем quote() :

    const < char = '"', skipIfQuoted = true >= config в одной строкe извлекает свойства char и skipIfQuoted из объекта config .

    Если некоторые свойства недоступны в объекте config , деструктурирование задает значения по умолчанию: ‘»‘ для char и false для skipIfQuoted .

    К счастью, функцию можно даже улучшить.

    Давайте переместим деструктурирование прямо в раздел параметров. И установим значение по умолчанию (пустой объект < >) для параметра config , чтобы пропустить второй аргумент, когда будет достаточно значений по умолчанию.

    Обратите внимание, что деструктурирующее присваивание заменяет параметр config в сигнатуре функции. Это позволяет сделать параметр quote() на одну строку короче. Параметр = <> в правой части деструктурирующее присваивание гарантирует, что используется пустой объект, если второй аргумент не указан вообще quote(‘Sunny day’) .

    Деструктурирование объектов — это мощная функция, которая эффективно обрабатывает извлечение свойств из объектов. Это хорошо, когда есть возможность указать значение по умолчанию, которое будет возвращено при попытке доступа к несуществующему свойству. В результате вы избегаете возникновения значения undefined и всех проблем, которые могут быть связаны с ним.

    Установите объекту свойства по умолчанию.

    Если нет необходимости создавать переменные для каждого свойства, такого как назначение деструктурирования, объект, который пропускает некоторые свойства, может быть заполнен значениями по умолчанию.

    Функция ES2015 Object.assign (target, source1, source2, . ) копирует значения всех перечисленных собственных свойств из одного или нескольких исходных объектов в целевой объект. После чего возвращает целевой объект.

    Например, вам нужно получить доступ к данным объекта unsafeOptions , который не всегда содержит полный набор свойств.

    Чтобы избежать появления значения undefined при доступе к несуществующему свойству из unsafeOptions , можно сделать следующие настройки:

    • определить объект defaults , который содержит значения свойств по умолчанию;
    • вызвать функцию Object.assign(< >, defaults, unsafeOptions) , чтобы создать новый объект options . Новый объект получает все свойства из unsafeOptions , недостающие берутся из defaults .

    unsafeOptions содержит только свойство fontSize . Объект defaults указывает значения по умолчанию для fontSize и color .

    Object.assign() принимает первый аргумент как целевой объект <> . Целевой объект получает значение свойства fontSize из объекта-источника unsafeOptions . А значение свойства color — из объекта-источника defaults , поскольку unsafeOptions не содержит color . Важен порядок, в котором перечислены исходные объекты: первый пришёл – первый ушёл.

    Теперь возможно получить доступ к любому свойству объекта options , включая options.color , который изначально был недоступен в unsafeOptions .

    К счастью, существует более простой и легкий способ установить значения по умолчанию для свойств объекта. Рекомендуется использовать новую функцию JavaScript, которая позволяет расширять свойства при инициализации объектов.

    Вместо вызова Object.assign() используйте синтаксис распространения объекта, чтобы скопировать в целевой объект все собственные и перечисляемые свойства из исходных объектов:

    Инициализатор объекта распространяет свойства из исходных объектов defaults и unsafeOptions . Важен порядок, в котором указаны исходные объекты: свойства более позднего исходного объекта перезаписывают более ранние.

    Заполнение неполного объекта значением по умолчанию является эффективной стратегией, обеспечивающей безопасность и стабильность вашего кода. Независимо от ситуации, объект всегда содержит полный набор свойств, и появление undefined невозможно.

    Параметры функции

    Параметры функции по умолчанию установлены на undefined .

    Обычно функция, имеющая определенные параметры, должна вызываться с одинаковым количеством аргументов. В таком случае параметры получают ожидаемые значения:

    При вызове функции multiply(5, 3) параметры a и b получают соответствующие значения 5 и 3 . Умножение рассчитывается как ожидаемое: 5 * 3 = 15 .

    Что происходит, когда пропускается аргумент при вызове? Параметр внутри функции получает значение undefined .

    Давайте немного изменим предыдущий пример, вызвав функцию только с одним аргументом:

    Функция multiply(a, b) < >определяется двумя параметрами: a и b . Вызов multiply(5) выполняется с помощью одного аргумента, в результате параметр равен 5 , а параметр b получает значение undefined .

    Используйте значение параметра по умолчанию

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

    Учитывая предыдущий пример, давайте сделаем некоторые улучшения. Если параметр b — undefined , то по умолчанию ему присваивается значение 2 :

    Функция вызывается одним аргументом multiply(5) . Первоначально параметр a равен 2 , а b соответствует undefined . Выражение проверяет, не равно ли b параметру undefined . Если это так, b получает значение по умолчанию 2 .

    Хотя представленный способ назначения значений по умолчанию работает, не рекомендуется сравнивать значения напрямую с undefined . Это уже будет выглядеть как хак.

    Лучшим подходом является использование параметров по умолчанию из ES2015. Он краткий и не содержит в себе прямого сравнения значений с undefined .

    Установка параметров по умолчанию для b не выводит значения undefined :

    Значение b = 2 в сигнатуре функции гарантирует, что если b получит значение undefined , то по умолчанию параметр изменится на 2 .

    Функция параметров по умолчанию из ES2015 интуитивно понятна и выразительна. Всегда используйте ее для установки значений по умолчанию для необязательных параметров.

    Возвращаемое значение функции

    В JavaScript функция, которая не имеет оператора return , возвращает значение undefined :

    Функция square() не возвращает результаты вычислений. Результат — undefined .

    Такая же ситуация возникает, когда оператор return присутствует, но без какого-либо выражения рядом:

    return; выполняется, но он не возвращает ничего. Результат вызова — undefined .

    Указывая значение для return , можно получить желаемый результат:

    Теперь вызов функции выведет нужное значение.

    Не доверяйте автоматической расстановке точки с запятой

    Следующий список операторов в JavaScript должен заканчиваться точкой с запятой (;):

    • пустой оператор;
    • операторы: let , const , var , import , export ;
    • утверждение значения;
    • утверждение отладчика;
    • утверждения: continue , break , throw , return .

    Если вы используете одно из вышеуказанных утверждений, обязательно нужно ставить точку с запятой в конце:

    Как можно видеть, в конце объявления let и оператором return обязательно ставится точка с запятой.

    Что происходит, когда вы не хотите указывать точки с запятой? Например, чтобы уменьшить размер исходного файла.

    В такой ситуации ECMAScript предоставляет механизм автоматической установки точки с запятой (ASI), который сделает всю работу за вас.

    Используя ASI, вы можете удалить точки с запятой из предыдущего примера:

    Вышеприведенный текст является допустимым кодом JavaScript. Отсутствующие точки с запятой автоматически вставлены за вас.

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

    Но тут существует один небольшой, но раздражающий момент, который может создать ASI. Если между return и возвращаемым выражением стоит новая строка return \n expression , ASI автоматически вставляет точку с запятой return; \n expression .

    К чему приведет пустой оператор return ? Функция вернет значение undefined . Если вы не знаете, как работает механизм ASI, то неожиданное появление значения undefined может ввести в заблуждение.

    Например, давайте изучим возвращаемое значение вызываемой функции getPrimeNumbers() :

    Между return и значением массива есть новая строка. JavaScript автоматически вставляет точку с запятой после оператора return , интерпретируя код следующим образом:

    В таком случае мы получим значение undefined .

    Проблема решена путем удаления новой строки между return и массивом:

    Оператор void

    Оператор void выполняет выражение и возвращает undefined вне зависимости от результата:

    Одним из вариантов использования оператора void является переопределение результата выполнения выражения и возврат undefined, в случае возникновения побочных эффектов выполнения функции.

    Undefined в массивах

    Вы получаете undefined при попытке доступа к элементу массива с индексом вне пределов массива.

    Массив colors имеет 3 элемента, поэтому корректные индексы равны 0 , 1 и 2 .

    Поскольку в индексах массива 5 и -1 нет элементов, значения colors[5] and colors[-1] получают значение undefined .

    В JavaScript вы можете столкнуться с так называемыми разреженными массивами. Эти массивы имеют пробелы, то есть на некоторых индексах не определены никакие элементы.

    Когда делаем попытку получить доступ к пустому значению в разреженном массиве, на выходе получаем undefined .

    Следующий пример генерирует разреженные массивы и пытается получить доступ к их пустым элементам:

    sparse1 создается путем вызова конструктора Array с числовым первым аргументом. Он имеет 3 пустых элемента.

    sparse2 создается с литералом массива, второй элемент которого отсутствует. В любом из этих разреженных массивов доступ к пустому элементу оценивается как undefined .

    При работе с массивами, чтобы избежать появления значения undefined , обязательно используйте допустимые индексы массивов или вообще не создавайте разреженные массивы. А вообще не забывайте, что массивы начинаются с нуля.

    Разница между undefined и null

    Часто у людей возникает разумный вопрос: в чем основное отличие между undefined и null ? Оба специальных значения означают пустое состояние.

    Основное различие заключается в том, что undefined представляет значение переменной, которая еще не была инициализирована, а null представляет собой намеренное отсутствие объекта.

    Рассмотрим разницу на примерах.

    Переменная number определена, но ей не назначено начальное значение:

    Числовая переменная не определена, что явно указывает на неинициализированную переменную.

    То же самое произойдёт при попытке доступа к несуществующему свойству объекта:


    Поскольку свойство lastName не существует в obj , JavaScript корректно оценивает obj.lastName как undefined .

    Нужно понимать, что переменная должна ожидать возвращение объекта функции. Но по какой-то причине создание объекта невозможно. В этом случае null является значимым индикатором недостающего объекта.

    Например, clone() — это функция, которая клонирует простой объект JavaScript. Ожидается, что функция вернет объект:

    Однако clone() может быть вызван с пустым аргументом: 15 или null (или вообще со значением null или undefined ). В этом случае функция не может создать клон, поэтому возвращает null — индикатор отсутствующего объекта.

    Оператор typeof делает различие между двумя значениями:

    Строгий оператор равенства === правильно отличает undefined от null :

    Заключение

    Существование undefined является следствием разрешительной природы JavaScript, которая позволяет использовать:

    • неинициализированные переменные;
    • несуществующие свойства или методы объекта;
    • несуществующие индексы для доступа к элементам массива;
    • вызов функции, которая ничего не возвращает.

    В основном сравнение напрямую с undefined является плохой практикой, потому что вы, вероятно, полагаетесь на разрешенную, но плохую практику, упомянутую выше.

    Стратегия борьбы с undefined заключается в уменьшении появления этого значения в вашем коде. И выработайте в себе привычку делать следующее:

    • уменьшать использование неинициализированных переменных;
    • делать жизненный цикл переменных коротким и близким к источнику их использования;
    • по возможности назначать начальное значение переменным;
    • стараться использовать const или let ;
    • использовать значения по умолчанию для некритичных параметров функции;
    • проверять наличие свойств или заполнить небезопасные объекты по умолчанию;
    • избегать использования разреженных массивов.

    CSS initial: основные проблемы использования начальных значений в коде

    Прошедшие выходные ознаменовались небольшой драмой в веб-сообществе. Началась она с безобидного «теста» по CSS в твиттере Макса Штойбера, разработчика styled-components и react-boilerplate:

    Насколько хорошо вы знаете CSS? (эмодзи: ученик у доски)

    При таких классах:

    какого цвета будут эти дивы?

    44% из свыше 14 тысяч ответивших выбрали вариант «первый див синий, второй красный». Правильный ответ, конечно же — оба дива синие: из правил с одинаковой специфичностью применяется последнее в CSS-коде, порядок классов в HTML-разметке на это никак не влияет.

    Реакция на опрос, а особенно на его результаты, была довольно бурной. Кто-то искал в вопросе дальнейший подвох и придирался к незакрытым тегам или отсутствию контента (без которого цвету, а не фону, не к чему примениться, и формально оба дива будут прозрачными:). Но во многих ответах сквозила мысль, что ни к чему разработчикам тратить время на эту путаницу, и как хорошо, мол, что нынешние инструменты типа CSS-in-JS позволяют не забивать голову такой ерундой и «сосредоточиться на главном». А такие «каверзные вопросы», мол, годятся лишь для того, чтоб «срезать» неугодных кандидатов на собеседованиях.

    Многих евангелистов CSS эта мысль просто возмутила. Эрик Мейер, автор легендарной «книги с рыбами», в запале написал:

    Если вы так боитесь каскада, что отказываетесь его изучать, вы не понимаете веба и лучше вам посмотреть в сторону чего-нибудь попроще в другой области кодинга. Спасибо, что прослушали мой доклад для фронтендеров.

    Потом он пояснял, что не хотел никого обидеть и действительно лишь предлагал разработчикам обратить внимание на области, основы которых не кажутся им настолько чуждыми. Но пожар уже разгорелся. Тут закономерно возмутились уже JS-разработчики: что это за язык такой, для входа в который непременно нужно показать знание каких-то странных и нелогичных шаманских ритуалов, почему-то называемых «самыми основами», хотя без них можно прекрасно обходиться? Эхо той битвы прокатывается по твиттеру до сих пор, почти не утихая.

    Что сильнее всего удивило в этой драме меня — то, как много спорщиков с обеих сторон баррикад не знали, что такое каскад.

    Никто не знает CSS

    Это сильное утверждение — не фигура речи, я готов за него ответить. Никто не знает CSS. Ни вы. Ни я. Ни даже Эрик Мейер или Таб Аткинс. И это абсолютно нормально.

    «Знать CSS» невозможно хотя бы потому, что само определение CSS как языка постоянно меняется. Модули спецификации появляются и отмирают. В них вносятся исправления, подчас незаметно переворачивающие основы. Некоторые модули существуют в двух-трех вариантах (разного уровня) одновременно, и иногда один и тот же код считается ошибкой по одному из них и валидным по второму. Поддержка браузерами — тоже не критерий: веб-стандарты — дело добровольное, поэтому браузеры поддерживают то, что им удобно и так, как им удобно. Включая такое, чего ни в одном стандарте не было.

    Так что не знать, какая сейчас специфичность у какого-нибудь :matches() , не стыдно. На таких вопросах можно «засыпать» даже редакторов спецификации (они не всегда успевают за правками друг друга:). Но некоторые вещи, мне кажется, достаточно фундаментальны для того, чтобы знать их в принципе. Откуда вообще берутся стили. Как CSS обрабатывает ошибки. Общие принципы построения раскладки. Опять же, не нужно помнить это всё наизусть — даже эти знания в CSS в любой момент могут устареть и потерять актуальность! Но как минимум помнить, где найти: где лежат первоисточники (спецификации), какие первоисточники наиболее актуальны (текущий редакторский черновик, отмеченный в списке как «Current work») и т.п.

    Понятие каскада, на мой взгляд, вполне заслуживает места в списке таких основ. Не зря первая буква в аббревиатуре CSS обозначает именно его, и никакие «CSS-in-JS» эту букву отменить не в силах! Тем более, что у нас есть замечательный повод обновить знания: совсем недавно спецификация для него обновилась, и в ней, как водится, появилось немало сюрпризов. С конца прошлого месяца основной спецификацией для CSS-каскада стал…

    Модуль каскада и наследования 4 уровня

    Между прочим, кандидат в рекомендации, т.е. полностью готов теоретически. Но мы будем сверяться с редакторским черновиком — он заведомо актуальнее, со всеми текущими исправлениями ошибок.

    Модуль немаленький, так что начнем знакомство с ним с раздела 8, «Изменения»: что новенького (по сравнению с предыдущим, 3-м уровнем)? Основных новинок три:

    • Новое ключевое слово revert , чтобы «откатить каскад» (!);
    • Условное подключение стилей через @import с помощью директивы @supports ;
    • Добавлено определение того, как каскадируются стили с ограниченной областью видимости («scoped styles» в оригинале).

    Если вы внимательно следили за недавней эволюцией HTML, последний пункт может вас удивить. Казалось бы, «scoped styles» выпилили из спецификации еще два года назад, браузеры тоже отказались от их поддержки, что ж CSS-ники только сейчас «выспались» с этой новинкой? На всякий случай приготовьтесь: с этим пунктом связана одна небольшая сенсация. И (как минимум) одна большая загадка.

    Но сначала надо наконец разобраться как следует, что же такое этот самый каскад?

    Главная часть (в которой без драки не обошлось:)

    Как часто бывает в CSS-спецификациях, ключевые понятия даются либо вообще без определения, либо определяются косвенно, через то, что они делают. Каскад — не исключение:

    Каскад берет неупорядоченный список объявленных значений для данного свойства у данного элемента, сортирует их по приоритету объявлений как описано ниже, и выводит единственное каскадное значение.

    Так что каскад — никакие не «вложенные селекторы» и прочие домыслы, что часто ошибочно ассоциируют с этим словом. На самом деле это своего рода турнир на выбывание, этакий «мортал комбат» для CSS-объявлений разного вида и происхождения, которые должны сразиться друг с другом, чтобы в итоге остался только один — сильнейший. Этот победитель получит всё, именно его значение будет определять вид элемента, а проигравших ждет полное забвение. Оставшаяся часть 6-го раздела спецификации разъясняет правила этого турнира.

    Рис. 1. CSS-каскад в представлении художника XIX века: водопад, на котором значения свойств борются друг с другом до последнего выжившего (фрагмент изображения с Wikimedia Commons)

    Первое, на что обращают внимание для CSS-объявлений — их происхождение и важность (эх, совсем как в жизни:). Затем — новинка! — область видимости. Специфичность, вокруг которой вечно ломают столько копий, идет лишь третьей (так что те, кто не считал ее «фундаментальным знанием», не так уж неправы:). Наконец, последним идет порядок в коде — но именно он решает исход поединка, когда прочие факторы равны. Свежий боец всегда побеждает равного по силе, но уставшего, следующее правило того же происхождения, важности, области видимости и специфичности перекрывает предыдущее. Кратко рассмотрим все эти факторы.

    Происхождение (источник) и важность

    Небольшой лайфхак: если вам что-то очень не нравится в CSS-спецификациях — непонятно, громоздко, просто не нравится — можно пойти на гитхаб рабочей группы CSS и попросить это убрать. Лично мне в предыдущих редакциях CSS-каскада не нравились какие-то «перекрывающие стили»: я их не понимал (на чем однажды попался), они загромождали алгоритм, были плохо документированы и — главное — никогда (?) не работали ни в одном браузере. В общем, их больше нет:). И порядок приоритетности стилей по источнику и важности отныне такой (по убыванию):

    1. Стили во время CSS-переходов (transition)
    2. Браузерные стили с !important
    3. Пользовательские стили с !important
    4. Авторские (т.е. наши, разработческие) стили с !important
    5. Стили во время анимаций
    6. Обычные (т.е. без !important ) авторские стили
    7. Обычные пользовательские стили
    8. Обычные браузерные стили

    У этого порядка есть логика. Браузерные стили — последний резерв, если ничего лучше не нашлось. Если пользователю они неудобны, он вправе переопределить их. Но дизайнер и разработчик сайта/приложения, скорее всего, могут сделать еще лучше и удобнее (они же профессионалы!), так что есть смысл положиться на их выбор. Далее, от анимации не было бы видимого проку, если бы значения, которые она меняет, не перекрывали статичные стили — поэтому эти изменения должны быть приоритетнее. Кроме действительно важных стилей. Которые, в свою очередь, в совсем уж крайнем случае тоже может переопределить пользователь (да, обычно дизайнер знает лучше, но всегда найдутся исключения). Наконец, у браузеров могут быть свои «секреты», которые нельзя переопределять никому (например, невыделяемость текста в поле типа password в WebKit). Ну а плавный переход от одного значения к другому возможен лишь тогда, когда это «переходное» значение приоритетнее начального и конечного — откуда бы те ни пришли (иначе вместо перехода будет резкий «перескок»).

    Со стилями при анимациях есть два неочевидных, но важных нюанса. Во-первых, к ним относятся не только обычные @keyframe -анимации, но и анимации через Web Animations API: для CSS-каскада это одно и то же. А во-вторых, как и три года назад, правильно по стандарту им назначает приоритет один лишь Firefox. В остальных браузерах анимации перекрывают даже стиль с !important . В некоторых зарубежных статьях встречается утверждение, будто именно это — стандартное поведение: не верьте им, они врут (как минимум, заблуждаются).

    И все те, кто гордо бьют себя пяткой в грудь «Я не использую каскад!» и при этом не довольствуются браузерными стилями, а перекрывают их своими — без разницы, «-in-JS» или просто так — получается, тоже врут:). Не шутите с каскадом!

    Область видимости

    В этом пункте, как в сказке, чем дальше — тем страньше и чудесатее:)

    Общее правило очень похоже на правило специфичности: чем «прицельнее» стиль, то есть чем уже его область видимости, тем он приоритетнее. Но для стилей с !important всё опять наоборот — чем шире область видимости, тем они важнее. Если область видимости явно не задана, то она ограничена корневым элементом.

    Теперь — внимание: в последнем абзаце (между двумя примечаниями) этого пункта притаилась обещанная сенсация!

    Область видимости обычных объявлений из атрибутов style считается ограниченной элементом с этим атрибутом.

    Такие дела: оказывается, стили в атрибуте style , такие простые и знакомые… и есть те самые таинственные scoped-стили! И у них есть своё место в каскаде. А значит, и все варианты CSS-in-JS, работающие через инлайновые стили (например, Radium) не «избавляют от каскада», а занимают в нем это же место.

    Если раньше стили из атрибута style отличались только наивысшей специфичностью, то теперь у них появилась отдельная область видимости, ограниченная самим элементом, и поэтому он важнее. Но у !important-стилей из атрибута style область видимости считается ограниченной… опять корневым элементом. А чтоб выделить их из прочих !important-стилей, им по-прежнему присваивается наивысшая специфичность.

    Правда, если перевести это всё с спецификаческого на человеческий, то функционально с атрибутом style ничего не изменилось, работает он как привычно. Просто это поведение стало частным случаем мудрёного общего правила. Но мне стало интересно поискать и другие случаи. Первым делом, конечно, я подумал про теневую DOM. Ведь целый модуль CSS под названием «CSS Scoping», т.е. «ограничение области видимости CSS», сейчас посвящен именно ей!

    И тут я наткнулся на очередной сюрприз. Оказывается, теневая DOM не использует критерий области видимости из каскада, а вместо этого…

    …должен быть добавлен дополнительный критерий каскада, между «Источником» и «Областью видимости», под названием «Теневое дерево».

    При сравнении двух объявлений, у которых разный контекст дерева, для обычных правил побеждает объявление, идущее раньше в дереве, включающем теневую DOM, а для правил с !important побеждает объявление, идущее в нем позже.

    Примечание: это противоположность тому, как работают scoped-стили.

    Признаюсь, на этом месте я совсем запутался. Новейший модуль каскада не всё знает про каскад? Критериев каскада всё больше и больше? Представить ситуацию, когда к одному элементу применяются правила из разных уровней теневой иерархии (вложенные веб-компоненты?) мне сходу не удалось. Казалось бы, границы теневых элементов для CSS-селекторов непреодолимы, можно только наследовать свойства окружения, да выделять сам корень теневой DOM изнутри через :host и его друзей. В погоне за иными селекторами, способными «проникать в Сумрак» и «переходить между его уровнями», пришлось продираться сквозь дебри других спецификаций… и в какой-то момент, глядя на чудесный пример из статьи Моники Динкулеску про эти теневые части, я обреченно осознал: да, я не знаю CSS.

    Может быть, в комментариях вы поможете мне разобраться.

    Специфичность

    А вот про нее мы много говорить не будем. Про нее вы и так знаете. Или нет… но это и впрямь не так уж важно. Специфичность — не первое дело в каскаде. И даже не второе.

    И правила специфичности можно не зубрить. Классические шпаргалки, помогающие в них ориентироваться — по рыбам или с помощью темной стороны Силы — еще актуальны. Не забывайте только про :not() , который получает специфичность своего аргумента. Об остальных исключениях говорить пока рано.

    Порядок в коде

    Здесь тоже вроде бы всё ясно: чем позже в коде, тем важнее. Ясно, что классы-модификаторы должны идти после немодифицированных классов (и позже подключаться, если они в отдельном файле). Но не забывайте, что стили анимаций — даже из того же самого файла — считаются другим источником, причем более приоритетным. И даже если объявить их в самом начале, они всё равно перекроют по каскаду вашу идеально плоскую структуру классов. И даже стили, бережно расставленные скриптом по атрибутам style ! А в Chrome, Safari и Edge — даже если у них будет !important (это уже не по стандарту, но учитывать это надо).

    Дальнейшие приключения CSS-значений

    Но сражение и победа в смертельной битве каскада — еще не конец истории CSS-значения. Это всего лишь переход с первой стадии их жизненного цикла на вторую. А всего этих стадий целых шесть! Давайте быстренько пробежимся по ним: это тоже важные понятия для того, чтобы претендовать на знание CSS.

    Объявленные значения (declared values)

    Сначала CSS отбирает «претендентов» на участие в турнире: выбирает правила, в принципе относящиеся к данному элементу — из стилей, присоединенных к документу, внутри сработавших условий @media , @supports и т.д., с совпадающими селекторами (а может, и не селекторами — взять тот же атрибут style ). Из браузерных стилей, из стилей сайта/приложения — откуда угодно. Может случиться и такое, что претендентов на какое-то свойство для какого-то элемента не окажется вообще (список объявленных значений может быть пустым).

    Каскадное значение (cascaded value)

    Этот «титул» достается единственному победителю в каскаде. Если претендентов не нашлось и турнир не состоялся — нет и победителя (каскадного значения).

    Так что, чтобы избавиться от каскада, нужно избавиться от всех объявленных значений для всех свойств — в том числе от браузерных стилей. Иначе, даже если вы не ничего не перекрываете своими стилями, в браузере вы всё равно видите результат каскада!

    Указанное значение (specified value)

    Право считаться указанным значением свойства для элемента — тот «приз», за который значения «бились» в каскаде. Но если каскадного значения нет (турнир не состоялся), указанное значение свойству всё равно назначается. Это значение по умолчанию. То, что помечено в спецификации для этого свойства как «начальное» (initial).

    Вот почему, например, все неизвестные HTML-элементы, для которых заведомо нет никаких браузерных стилей, отображаются как display:inline — это начальное значение для display .

    Вычисленное значение (computed value)

    Чтобы как-то работать со значением дальше, указанное значение надо преобразовать во что-то конкретное. Например, практически всё с размерностью длины переводится в пиксели: font-size: 0.6em при дефолтных 16px у предка превратятся в 9.6px. И потомки элемента унаследуют именно этот результат вычисления — вычисленное значение.

    Для разных свойств бывают свои нюансы: скажем, для line-height 1.5em и 150% пересчитаются в пиксели (и это значение в пикселях достанется потомку, независимо от его собственного font-size ), а вот безразмерный множитель 1.5 так и унаследуется безразмерным (и для каждого потомка будет переводиться в пиксели заново, с его font-size ). Напротив, для width проценты наследуются именно как проценты, без перевода в пиксели (так что width: inherit в родителе с width: 80% будет соответствовать тем же 80% от родителя, или 64% от его контейнера). Обычно такие нюансы оговариваются в спецификации для каждого свойства, в отдельной одноименной графе, так что присматривайтесь к ней повнимательнее.

    Рис. 2. Пример, где искать нюансы про вычисленные значения в спецификациях

    А вот метод getComputedStyle, несмотря на название, далеко не всегда возвращает именно вычисленное значение (о чем спецификация CSS Cascade честно предупреждает).

    И еще важный нюанс: вычисленное значение у свойства есть даже тогда, когда оно к этому элементу не применяется. Например, вычисленные значения flex могут быть не только у флекс-элементов. Или border-spacing — не только у таблиц. А поскольку последнее как раз наследуется, это может привести к занятным побочным эффектам. Скажем, весьма забавно выглядит результат на странице с Bootstrap 3 (и вообще везде, где активно используется «micro clearfix» Галлахера). Можете даже по-доброму разыграть так кого-то из менее опытных в CSS коллег (главное, потом всё-таки объясните им, в чем был фокус и откуда взялись гигантские отступы:).

    Используемое значение (used value)

    На этой стадии значения уже никуда не передаются, так что браузер может «допиливать» их до чего-то совсем конкретного: переводит в пиксели всё, что можно в них перевести (включая безразмерные line-height и процентные width ), все значения типа normal и auto тоже переводятся в какие-то конкретные, нормальные числа.

    Именно эти значения возвращает метод getComputedStyle для некоторых свойств (по историческим причинам). А вот если свойство к элементу не применяется, то и используемого значения у него нет.

    Фактическое значение (actual value)

    Но и используемое значение — не конец его приключений. Иногда браузер не может применить значение, не округлив его: скажем, вместо рамки толщиной 2.2px приходится рисовать просто 2px. Или упомянутые 9.6px для размера шрифта отображать как 10px (или 9px… когда-нибудь мы узнаем это более точно. Или не узнаем. Но попытаемся. На всякий случай не забывайте следить за обновлениями!:).

    В спецификации каскада есть целая таблица примеров, что может происходить с разными значениями разных свойств на разных этапах их дальнейшей «карьеры» после победы в каскаде.

    Управление каскадом

    Итак, совсем избавиться от каскада нельзя. Но можно укротить и подчинить его стихию своей воле. Спецификация всегда готова рассказать, как.

    Для этого модуль каскада и наследования предусмотрел целых 4 универсальных значения, подходящих для всех свойств: initial , inherit , unset и revert . И целое универсальное свойство all , которое умеет применять эти универсальные значения ко всем свойствам сразу (ну, почти). Познакомимся с ними поближе?

    Значение initial

    Присваивает свойству его начальное значение. То самое, которое свойство получает при «неявке претендентов на турнир», при отсутствии каскадного. Для display это всегда будет inline , для большинства свойств шрифта — normal , для размеров — auto , для отступов — 0 , для большинства «спецэффектов» — none …

    Значение inherit

    Заставляет свойство элемента унаследовать значение этого же свойства его родителя. То есть в его указанное, а затем и вычисленное значение переходит вычисленное значение от родителя. Причем для любого свойства, даже изначально ненаследуемого.

    Например, можно поставить width: inherit элементу, вложенному в контейнер с процентной шириной, и он всегда будет занимать в нем такую же часть, как сам контейнер в своем родителе. Получится такой «фрактальный» интерфейс, где части подобны целому (правда, не могу подобрать пример, где это надо:).

    Значение unset

    Фактически, отменяет каскадное значение, как будто для этого свойства элемента нигде никаких стилей не задано. Наследуемые свойства при этом получают родительское вычисленное значение (как при inherit ), а ненаследуемые — «обнуляются» до своего начального (как при initial ).

    Фактически, это значение, особенно если «коврово» применить его для всего подряд — это готовый CSS-ресет («ластик»):

    Только, пожалуй, слишком уж радикальный. Сбрасывать display у

    до inline — наверное, чересчур…

    Значение revert

    Для тех, кому unset кажется слишком жестким решением, модуль каскада 4 уровня добавил более мягкую альтернативу: «обнулить» каскадное значение не полностью («вообще нигде никакого»), а отменить только один текущий уровень каскада. Если оно в авторских стилях — оставить только браузерные и пользовательские. Если в пользовательских — оставить только браузерные. Ну а если в браузерных — не оставлять ничего (там revert и unset эквивалентны). Стили анимаций для этого механизма (и только для него!) считаются частью авторских стилей.

    К сожалению: опробовать это значение в деле труднее, чем предыдущие: поддерживается оно пока только в Safari. Но значения initial и unset (появившиеся еще на 3 уровне модуля) работают везде, кроме IE, а inherit (оно вообще еще из CSS2.1) — даже в нем.

    Свойство all

    Это уникальное свойство формально считается сокращением (shorthand) для всех остальных свойств CSS. За исключением кастомных свойств (которые CSS-переменные), а также (по историческим причинам) свойств, отвечающих за направление текста — direction и unicode-bidi . Впрочем, от использования последних спецификация всячески отговаривает — мол, за это должна отвечать разметка (атрибут dir и т.п.).

    Но, в отличие от других сокращений, у него нет полной записи. И значение у него может быть только одним из четырех универсальных, перечисленных выше: все свойства сразу можно только либо сбросить на начальные значения, либо унаследовать от родителя, либо «отменить», как будто они вообще не были указаны, либо «откатить» на один уровень каскада (в нашем случае, до браузерных стилей).

    CSS-ресет на этом свойстве — фактически в одну строчку — мы уже видели. Увы, использовать его на практике пока проблематично: по обыкновению, картину портят браузеры от Microsoft (и примкнувшая к ним Opera Mini), а существующие полифилы просто разворачивают его в огромный список свойств (может быть, в вашем частном случае это годится, но веб и так слишком раздут…). Но для современных браузеров уже есть возможность легко и быстро избавить компонент от любых зависимостей от внешних стилей. А нужные стили, например, для подстройки под тему оформления, передавать в него теми же CSS-переменными.

    На Microsoft-овском форуме UserVoice у свойства all стоит статус «Мы подумаем», то есть «Поставлено на очередь» (on the backlog). Но почему-то за него отдано всего чуть больше 600 голосов. По-моему, маловато будет (для такой важной фичи-то). Давайте поднажмем и добьем хотя бы до тысячи! 🙂

    Эпилог (в котором обязательно должна победить дружба)

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

    CSS сложен. Времена, когда он был простым языком для раскрашивания ссылок, прошли тогда же, когда и JavaScript перестал быть несерьезным языком для менюшек и летающих по экрану снежинок. Не знать CSS не стыдно: он постоянно меняется и развивается, и знания в нем, как и в других областях IT, быстро устаревают. Стыдно — на мой взгляд — потешаться над людьми, которые знают его лучше, обладая лишь иллюзией знания а-ля «есть какой-то там “каскад”, он злая-бяка-выжечь-каленым железом, JS — спасение».

    Так относится ли каскад к основам CSS, без знания которых нельзя и подступаться к нему, или это «тайное знание для маньяков», которое обычному человеку ни к чему? На мой взгляд, всё дело в глубине этого знания. Знать наизусть все тонкости специфичности, включая хаки вида .please.please.please <> и :not(#just-ordinary-class) , пожалуй, и впрямь ни к чему. Но в принципе знать, что 1) все стили в вебе каскадные, 2) они специально устроены так, что значения для свойств могут приходить из нескольких мест и иметь разный приоритет в зависимости от каких-то условий, 3) если делать всё правильно — хорошими инструментами, по хорошей методологии и т.п. — то у нужных стилей будет достаточный приоритет, но 4) существуют особые случаи (как с теми же анимациями), и это не обязательно баг браузеров или стандарта — на мой взгляд, человек, считающий себя веб-разработчиком, всё-таки должен. А частности всегда можно уточнить в справочнике, спецификации… или у более опытных в CSS коллег:). Которые не «дурака валяют, раскрашивая буковки», а точно так же решают свою сложную часть общей задачи по созданию современного динамичного, интерактивного, адаптивно-отзывчивого, доступного, удобного, красивого и быстрого веб-интерфейса.

    Сила веба — в объединении разных технологий, сила команды — в объединении разных знаний и умений. Давайте вместе делать веб лучше, учиться друг у друга и стремиться стать выдающимися специалистами!

    Синтаксис CSS — правила, селекторы, свойства, их значения (параметры) и комментарии в языке каскадных таблиц стилей

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

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

    В частности, разберем, что представляет из себя в общем виде отдельно взятое стилевое правило, которое включает в себя селектор, а также свойства и их значения.

    Синтаксис и варианты записи правил CSS

    Поскольку каскадные таблицы стилей представляют из себя, пусть и специализированный, но все же язык, допустимо провести аналогию совокупности правил CSS с простым текстом, где каждое слово состоит из букв, предложение — из слов, а сам текстовый фрагмент — из предложений.

    Учитывая эту наглядную ассоциацию, можно вывести логическую последовательность, которая касается структуры CSS (она является максимально оптимальной, на мой скромный взгляд):

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

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

    Итак, каждому свойству присваивается конкретное значение (параметр), причем, их может быть несколько. Соответствующий набор свойств (правило) применяется к определенному селектору. Схематически правило CSS можно отобразить так:

    Впереди помещается селектор, затем ставятся фигурные скобки (открывающая и закрывающая), между которыми и находятся свойства CSS с присвоенными им значениями, название каждого свойства отделяется от соответствующего ему параметра двоеточием. Все свойства вместе со значениями разделяются между собой точкой с запятой. Посмотрим на живой пример:

    Обратите внимание на то, что свойство background имеет сразу несколько значений: цвет фона (#00ff00), путь до фонового изображения («west.png») и разрешение на его повторение по горизонтали (repeat-x). Наверное, вы заметили, что подобный вариант записи несколько отличается от схемы, представленной чуть выше.

    На самом деле никакого несоответствия здесь нет. Поскольку CSS не чувствителен к пробелам, переносам строк, символам табуляции, стилевые правила могут быть записаны самыми разными способами, которые используются в конкретных ситуациях.


    Скажем, расширенная запись правила, образец которой только что был представлен, наиболее удобна для восприятия, а потому применяется обычно для изучения стилей, ну или в «сыром» файле style.css, который создан для нового сайта, а потому еще не доведен до ума. Есть и другая разновидность этого же самого варианта записи CSS правила:

    Как видите, здесь для каждого свойства повторяется один и тот же селектор. Это не является ошибкой по причинам, упомянутым выше, однако такой формат записи правила засоряет код и усложняет его восприятие, а потому практически не используется.

    Расширенный вариант записи можно представить и без переносов:

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

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

    Селекторы, свойства и применение стилей

    Я уже отмечал, что с течением времени происходит все более тесное сближение HTML и CSS. Если на заре зарождения интернета в его сегодняшнем виде внешний вид элементов на веб-странице описывался с помощью атрибутов тегов гипертекстовой разметки, то в наши дни слишком частое использование такого метода считается моветоном, поскольку перегруженный ХТМЛ-код часто не способствует должной оптимизации страниц сайта, что в том числе вредит его SEO продвижению.

    В этом смысле пятая версия языка разметки не только позволяет соблюсти чистоту кода, но и предоставляет практически неограниченные возможности по максимуму реализовывать все свои задумки, которые базируются на современных технологиях.

    Кстати, в том числе и по этой причине из всех способов привязки стилей к HTML коду документа наиболее востребованным является вынесение всех стилевых свойств в отдельный файл style.css.

    При этом браузер должен понимать, к какому элементу прописано то или иное правило CSS. Вот здесь и становится понятна роль селекторов, среди которых различают несколько видов.

    1. Базовые (селекторы тегов) — самый простой для понимания, название которого совпадает с именем соответствующего тега в ХТМЛ коде документа.

    Возьмем в качестве примера горизонтальную линию как элемент дизайна страницы сайта. Мы уже знаем, что эта линия создается с помощью тега hr, который прописывается в HTML-коде. Если вы перейдете по только что данной ссылке, то сможете отследить, как меняется внешний вид этого элемента при применении атрибутов тега hr, которые задаются в ХТМЛ-документе вместе с ним.

    Однако, как я уже говорил, современные тенденции направлены на разгрузку HTML кода за счет использования оформления с помощью стилей CSS, представленных в отдельном файле. Поэтому приведенные в той статье атрибуты тега hr (width, size, color, noshade) заменяем на свойства стилей, прописанные в style.css:

    Которые позволяют получить точно такой же результат:

    2. Классы (class) и идентификаторы (id) — имеют некоторую общность, поскольку являются атрибутами тегов, к которым они добавляются в HTML-коде, и одновременно селекторами, кои и указываются в файле CSS, каждый со своим набором свойств.

    Cвязь элементов, описываемых тегами с классами и идентификаторами, осуществляется тем, что параметрами id и class являются названия селекторов. Примеры ниже.

    Тег с классом «text-x» в HTML-коде:

    Стили для этого класса в CSS (впереди обязательно нужно поставить точку):

    То же самое для идентификаторов (пример с контейнером див). HTML:

    CSS (перед идентификатором ставится значок решетки):

    Последующие ниже варианты могут содержать как селекторы тегов, так и классы с идентификаторами.

    3. Дочерние селекторы — как известно, в HTML различают родительские элементы (теги) и дочерние (их потомки), которые в них вложены. Весьма логично, что в CSS точно такое же разделение существует между соответствующими этим элементам селекторами.

    Правило дочернего селектора указывает, что свойства стилей будут применены к конкретному элементу (в ниже следующем примере это тег гиперссылки a) только в том случае, если он является непосредственным потомком (1-й уровень вложенности) определенного родителя (li):

    4. Контекстные селекторы — очень напоминают дочерние селекторы с той лишь разницей, что здесь свойства CSS будут применены ко всем потомкам относительно указанного родителя, вне зависимости от степени вложенности (родительский селектор в правиле стилей идет первым и отделен от дочернего пробелом):

    5. Соседние селекторы — данное CSS правило справедливо для элементов, описанных тегами, которые идут друг за другом в HTML-документе, причем, не имеют родственных отношений, иными словами, не вложены друг в друга. Соответствующие им селекторы отделяются друг от друга знаком «+», причем, свойства будут применены ко второму элементу лишь в том случае, если он располагается непосредственно рядом с первым:

    6. Универсальный селектор — применяется в тех случаях, когда нужно задать единый стиль оформления для тех или иных элементов на веб-странице, расположенных в различных ее областях. Например, определить вид и размер шрифта. Этот селектор обозначается звездочкой:

    7. Селекторы атрибутов — позволяет присваивать одни и те же стили всем элементам на веб-странице, имеющим одинаковые атрибуты:

    Либо определенным элементам:

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

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

    Здесь заданы последовательно два цветовых оттенка для горизонтальной линии blue (синий) и green (зеленый). Поскольку значение green находится ниже, горизонтальная линия в браузере будет окрашена в зеленый цвет. В идеале, конечно, до такой ситуации лучше не доводить, так как это приводит к засорению кода, но, в принципе это не смертельно и легко исправляется. Главное, вы теперь знаете, что такая ситуация возможна.

    Виды значений (параметров) свойств

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

    Числа

    Роль значения того или иного свойства может играть целое число, в котором содержаться цифры от 0 до 9, либо десятичная дробь, где целая и дробная часть разделяются точкой:

    Здесь для абзаца, определяемого тегом p, заданы свойства со значениями, которые задают жирный шрифт и интервал между строками. Если целая часть десятичной дроби равно 0, то ее можно не писать, а просто впереди ставить точку. То есть записи: 0.6 и .6 абсолютно идентичны.

    Размеры в абсолютных и относительных единицах

    Для указания размера того или иного элемента в CSS применяются абсолютные и относительные единицы измерения. Абсолютные отображают размер вне зависимости от устройства, в котором просматривается документ (скажем, монитор компьютера), а относительные единицы определяют размер элемента относительно какого-то иного размера.

    Некоторые абсолютные единицы известны из реальной жизни (те же сантиметры, миллиметры и дюймы), о пикселях вы, наверное, уже имеете некое представление.

    1. Абсолютные единицы измерения

    Единица Краткое описание
    px Пиксель
    in Дюйм (1 in = 2,54 cm)
    cm Сантиметр
    mm Миллиметр
    pt Пункт (1 pt = 1/72 дюйма)
    pc Пика (1 pc = 12 pt)

    К слову, cm, mm, pt, pc практически не используются в практической деятельности вебмастеров и разработчиков, а потому нет смысла их подробно разбирать. А вот на остальные мы обратим внимание в той или иной степени.

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

    Важно отметить, что реальные единицы часто сопоставляются с теми же пикселями при указании разрешения, которое измеряется в dpi (dots per inch), являющемся специальным показателем, который отражает количество пикселей на дюйм.

    Можно сказать, что чем выше этот показатель, тем более качественное и детальное изображение мы получим. Кроме этого, дисплей любого современного электронного устройства имеет подобную характеристику (пример: монитор компьютера с разрешением 1280 × 1024 px).

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

    2. Основные относительные единицы

    Единица Краткое описание
    em Размер шрифта текущего элемента (изначально получен из ширины заглавной литеры «M» определенного шрифта)
    ex Размер, основанный на высоте буквы «x» в нижнем регистре
    ch Для текущего элемента (основан на ширине символа «0»)
    rem Размер шрифта для корневого элемента

    Сначала подробнее остановимся на основных относительных параметрах. Единица em позволяет задать, например, величину шрифта (когда она явно не установлена) по отношению к размеру, указанному в браузере по умолчанию, или относительно размера родительского элемента.

    Размер шрифта в em, который может быть задан изначально при верстке сайта, устанавливается через свойство стилей font-size. То есть, 1 em равен дефолтному размеру шрифта либо размеру шрифта родителя. Запись в процентах тождественна em в том плане, что 1 em = 100%.

    Для ex действуют точно такие же правила, что и в отношении em. Иными словами, существует привязка ex к размеру, установленному в веб-браузере по умолчанию, либо к величине размера шрифта родителя. Аналогично работает и «ch».

    Стоит сделать акцент на различии между em и rem. Оно заключается в том, что em находится в полной зависимости от размера шрифта родителя и изменяется одновременно с ним, а вот rem строго привязан к корневому элементу, определяемому тегом html.

    Далее еще несколько вспомогательных относительных единиц, которые находятся в связке с высотой и шириной окна браузера (областью просмотра).

    3. Относительные единицы, привязанные к области просмотра браузера

    Единица Краткое описание
    vw 1% от ширины области просмотра
    vh 1% от высоты области просмотра
    vmin 1% от меньшего значения области просмотра по ширине и высоте
    vmax 1% от большего значения области просмотра по ширине и высоте

    Для чего нужны такие варианты задания размеров? Дело в том, что далеко не всегда наилучшим решением является использование стандартных относительных величин, включая проценты. Порой выгоднее связать величину шрифта с высотой и шириной окна браузера. Скажем, ежели область просмотра по высоте равна 800px, то 1vh = 8px, а при ширине 1500px — 1vw = 15px.

    Единицы vmin и vmax определяются соответственно минимальными и максимальными размерами области по высоте и ширине. Образец: высота окна браузера 700px, а ширина — 1300px. В этом случае vmin = 7px, а vmax = 13px.

    При установке размеров нужно обязательно указывать единицы (например, height: 55px), иначе браузер некорректно будет отображать соответствующие элементы. Значения, равные нулю, к данному правилу не относятся, их можно обозначать двумя способами (padding: 0 или padding: 0px), по понятным причинам с подавляющим преимуществом лидирует первый вариант.

    Проценты

    Этот вид единиц я решил упомянуть отдельно. Выше я уже сказал о преимуществе использования относительных значений при задании свойств. Это в полной мере относится и к процентам.

    Записи в процентах применяются довольно часто, особенно тогда, когда необходимо установить значение относительно родителя или когда размеры находятся в зависимости от неких внешних обстоятельств. К примеру, ширина элемента, равная 100%, будет подстраиваться под экраны самых разных устройств и корректно там отображаться.

    Ключевые слова

    Разберем некоторые слова, которые играют роль параметров свойств и определяют то или иное положение либо внешний вид элемента. Вот несколько наглядных примеров.

    1. Значения свойства text-align, которые способствуют выравниванию текста по горизонтали: center | justify | left | right | start | end. Вот пример c параметром justify:

    И для обоих прописаны стили:

    Если в отношении элемента не указан цвет текста (свойство «color»), то по умолчанию текстовый фрагмент будет окрашен в черный (в большинстве популярных браузеров). В нашем примере для внешнего контейнера («bl-1») color как раз отсутствует. Вследствие этого при указании значения «currentColor» фон этого контейнера примет черный окрас:

    3. Inherit — это ключевое слово в роли параметра устанавливает наследование соответствующих значений родительских элементов. Образец:

    И CSS правила для него:

    4. Initial — применяется в тех случаях, когда требуется установить исходные параметры свойств. Скажем, помогает восстановить значения, установленные браузером по умолчанию, либо определить начальные параметры, которые были изменены в результате наследования. Пример:

    И стили для него:

    С помощью класса «init» внешний вид фрагмента абзаца p, заключенного в тег span, и нижнего заголовка H2, изменен в соответствии с настройками их стилей по умолчанию.

    5. Unset — это параметр, являющийся по сути «гибридом» inherit и initial. Определяет параметр свойства как inherit, ежели свойство наследуется от родителя, в противном случае — как initial.

    Пример 1 (действует как inherit):

    В соответствии с правилами CSS свойство color наследуется, поэтому «unset» в нашем примере возвращает зеленый цвет текста для контейнера «xxx», который является потомком «zzz»:

    Пример 2 (работает как initial):

    Так как по правилам таблиц стилей свойство border не наследуется, то «border-color: unset» возвращает цвет рамки к значению по умолчанию, то есть она приобретает черный оттенок.

    URL, или адрес

    Этот параметр содержит в себе унифицированный указатель ресурса и применяется, когда нужно, например, указать относительный или абсолютный путь к файлу с изображением (читайте вот эту статью о вставке картинок на страницу с помощью HTML тега img). При этом используется ключевое слово url (), где между скобками и указывается путь до графического файла:

    Время

    Используется, например, при реализации анимационных эффектов (да-да, на чистом CSS можно создавать теперь и такие вещи), где параметры указываются в секундах (s) или миллисекундах (ms). Значения могут быть как в виде целых, так и дробных чисел. При этом надо помнить, что нельзя допускать пробела между числом и единицей измерения (2s, 50ms)./p>

    И, соответственно, стили для него:

    На этой странице можете не только посмотреть результат, но и попытаться отредактировать некоторые свойства, так сказать, на практике, в общем, поэкспериментировать. Естественно, начинающим изучать каскадные таблицы стилей пока трудно осознать и принять к сведению тонкости анимации, но продолжение обязательно последует, поэтому подписывайтесь на свежие материалы обязательно, чтобы вовремя получить желаемое. Но продолжим.

    Строки

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

    Скажем, ежели всю строку вы берете в одинарные кавычки, то внутренний текстовый фрагмент — в двойные, и наоборот. Разрешается также применять один и тот же вид, только в этом случае необходимо экранировать внутренние кавычки, добавляя перед ними обратный слеш «\»:

    • свойство: «строка ‘контента'»
    • свойство: ‘строка «контента»‘
    • свойство: «строка \»контента\»»
    • свойство: ‘строка \’контента\»

    Далее рассмотрим конкретный пример, чтобы было понятнее.

    Для начала ХТМЛ-код:

    С целью обозначения цветов для свойств при составлении правил CSS могут использоваться различные параметры. Остановимся вкратце на каждом из них:

    1. Название. Правда, задавать таким способом можно не все, а только часть оттенков («red» — красный, «green» — зеленый, «black» — черный, «orange» — оранжевый, «yellow» — желтый, «olive» — оливковый и некоторые другие). Их также можно отнести к ключевым словам.

    2. Hex (шестнадцатеричный код). Основой шестнадцатеричной системы, в отличии от известной всем десятеричной, являются 16 символов: 10 цифр (от 0 до 9) и 6 первых букв латинского алфавита (A, B, C, D, E, F). Буквы от A до F соответствуют числам от 10 до 15.

    3.1. RGB — можно задавать значение цвета, исходя из десятеричной системы. Название данного метода является аббревиатурой трех основных задействованных в ней цветов: Red (красный), Green (зеленый), Blue (синий). Оттенки каждого из них находятся в диапазоне от 0 до 255. Для применения этой системы необходимо впереди прописать rgb, а в скобках указать каждый из компонентов цвета: rgb (240, 0, 180). Также не возбраняется использовать проценты:

    3.2. RGBA — расширенный вариант предыдущего метода RGB, содержащий альфа-канал, который устанавливает прозрачность элемента в диапазоне от 0 до 1. Параметр «0» соответствует полной прозрачности, а «1» — совершенной непрозрачности.

    4.1. HSL — наименование этого метода также представляет из себя не что иное как аббревиатуру, которая включает первые буквы трех слов: Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Именно эти характеристики в совокупности определяют конечный цвет. При этом оттенок расположен на конкретном месте цветового круга:

    Поскольку весь круг составляет 360°, то каждому оттенку (hue) соответствует вполне конкретное значение в градусах в диапазоне от 0° до 359°. При этом параметры основных оттенков таковы: 0° — красный, 120° — зеленый, 240° — синий.

    Насыщенность и светлота измеряются в процентах (от 0 ло 100%). Для saturate параметр 0 значит отсутствие цветовой гаммы, а 100% — максимально насыщенный цвет. Чем больше значение lightness, тем светлее тон, 0 соответствует черному, а 100% — белому.

    4.2. HSLA — по аналогии с RGBA является расширенным вариантом HSL, к которому добавлен показатель прозрачности.

    Угол поворота или наклона

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

    • градусы — deg (1 полный круг составляет 360deg);
    • грады — grad (полный круг 400grad);
    • радианы — rad. Целый круг равен 2&#960 (приблизительно 6.2832rad);
    • повороты — turn (1 turn приравнивается к полному повороту).

    Немаловажно отметить, что могут использоваться отрицательные значения. Ниже даны наглядные примеры с параметрами некоторых углов (поворотов):

    Для наглядности применим характеристики поворота для реализации градиентной заливки фона и в качестве одной из составляющих нашего образца поместим на страницу определенный текст:

    А теперь составим и правило CSS для такого фона:

    Результат можете оценить на этой странице и там же поупражняться, отредактировав стили по своему желанию. Это тоже будет полезным для приобретения практических навыков.

    Комментарии в CSS

    Ну и, наконец, комментарии в правилах со свойствами CSS. На этой странице я уже неоднократно пользовался ими, разъясняя действие того или иного свойства. Комментарии вставляются прямо в коде стилей, напротив соответствующего свойства. Их текст располагается между символами «*», которые в свою очередь находятся между двумя знаками слэша «/».

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

    Комментарии обычно используются в учебных целях для наглядного объяснения действия соответствующего свойства. Однако, появление дополнительного текста увеличивает время загрузки страницы, что не является оптимальным с точки зрения продвижения проекта.

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

    Ну, вот, на сегодня, пожалуй, все. Пост получился объемным, однако вся информация, которая касается синтаксиса CSS и его базовых понятий, таких как свойства, селекторы, правила стилей, поверьте, является очень важной для постижения основ каскадных таблиц стилей.

    enepomnyaschih

    Супер-пупер школа программирования

    Исследование идеального UI Framework’а, программирование игр, веб-программирование, задачи и решения

    Один мой хороший друг и коллега Юра Поздняков ( ypozdnyakov ) подсказал решение для проблемы, опубликованной в статье Проблема наследования CSS стилей. Как оказалось, я не до конца понимал суть работы CSS-селекторов, и Юра открыл мне глаза. Оказывается, что всякий селектор, который выбирает некоторый элемент, не выбирает его дочерние элементы. Мне так всегда казалось, потому что когда я просматривал некий элемент в файрбаге, то в списке CSS-правил элемента фигурировали и селекторы родительских компонентов. На самом деле, стиль родительского компонента будет применен к дочернему лишь в том случае, если его значение в дочернем компоненте равно inherit. Вы скажете: «Ха! Так это ж очевидно!» Я понимаю, что это очевидно, но пока ты это сам не прочувствуешь, пока сам с этим не столкнешься, это будет лежать в твоей голове бессмысленным грузом.

    О наследовании CSS

    Вот пример, который полностью перевернул мое представление о CSS:

    Как вы думаете, каким шрифтом будет выведена ссылка? Если исходить из понятия «Какой из селекторов круче?», то шрифт будет Comic Sans MS. Очевидно, первый селектор круче второго, потому что в нем целых два класса против одного. Но на самом деле правильный ответ — Arial! Почему? Потому что первый селектор выбирает только лишь компонент

    Как же так? А почему же тогда, если удалить второе CSS-правило, то шрифт будет Comic Sans MS, ведь этот селектор не выбирает дочерний компонент?

    Все дело в том, что по умолчанию в любом браузере шрифт всех ссылок установлен в значение inherit. Последний приведенный CSS-файл эквивалентен следующему:

    Так как ссылка наследует шрифт родителя, то мы и получаем шрифт Comic Sans MS. Честно, когда я это впервые понял, мой мозг просто взорвался =)

    Решение

    Решение проблемы наследования CSS-стилей, по нашему с Юрой мнению, заключается во внедрении стандарта построения DOM и CSS-файлов. Ниже перечислены правила, описывающие данный стандарт:

    1. Не использовать !important

    Все это знают, но все равно делают. Делают, потому-что так проще. Когда какой-то стиль в течение 20 минут не хочет прикручиваться куда надо, обычно сдаются и ставят этот проклятый !important. Но это плохо, потому что !important-important нету. И если этот самый !important испортит жизнь другим компонентам, то справиться с этим будет еще сложнее. Лучше поступить так: внимательно всмотреться в CSS-правила и найти-таки несоответствие стандартам, перечисленным в данной статье. Это несоответствие с большой долей вероятности и будет служить причиной проблемы.

    2. Ни один CSS-селектор не должен содержать записи вида #myid

    По той же самой причине, по которой нельзя использовать !important, нельзя использовать и селекторы по идентификаторам. Ибо они всегда круче. У них сильно высокий приоритет. Кроме того, вы не можете дать разным компонентам один и тот же идентификатор, поэтому подобные селекторы не дают возможности использовать CSS в полной мере. Лучше прикрутить к компонентам какие-то классы, и заменить все селекторы по идентификаторам селекторами по классам.

    3. Правильно именовать классы

    Для каждого компонента ввести уникальный класс x, и классы всех дочерних элементов определять как x-y. Пример:

    Это гарантирует, что все классы имеют уникальные имена.

    4. CSS-файл приложения должен для всех тегов переопределить стили, использующие по умолчанию значение inherit

    Тем самым мы избавились от проблемы наследования. Мы объявили правила наиболее низкого приоритета, которые гарантируют, что непредсказуемого наследования стилей не будет. Если же вам хочется, чтобы какой-то стиль у некоторого компонента унаследовался от родителя, объявите его отдельно:

    5. Все остальные селекторы строятся только из классов и псевдоклассов

    Можно, при желании, добавлять еще класс самого компонента. В итоге, получим примерно следующее:


    Это гарантирует, что стили будут применяться ровно к тем компонентам, о которых мы говорим. Тем самым решается проблема приоретизации.

    Важно! Не допускайте селекторов вида:

    Это испортит вам всю жизнь. Данный стиль будет прикручиваться ко всем дочерним ссылкам и перебивать их своим высоким приоритетом. Используйте такие селекторы лишь в том случае, если совершенно уверены, что внутри .application-main-panel не может быть вложенных компонентов произвольного вида.

    6. (опционально) Для компонентов определить стили по умолчанию

    Делать это можно лишь в том случае, если ваш компонент не может содержать других вложенных компонентов или другого произвольного HTML, поскольку в таком случае все стили могут поплыть. А если у вас есть два таких компонента, для которых определены стили по умолчанию, и которые содержатся один в другом, то результат будет зависеть от порядка подключения CSS-файлов. А это плохо: получается косвенная зависимость одного компонента от другого и от приложения в целом.

    Заключение

    Я надеюсь, что эта статья поможет вам решить многие проблемы, возникающие при верстке веб-страниц, избавит вас от необходимости добавлять !important где попало и сделает программирование еще проще и интереснее.

    Я тоже постараюсь ближайшее время посвятить переверстке своего проекта, поскольку неразбериха в CSS файлах уже неоднократно давала о себе знать. По ходу дела буду вносить коррективы в данную статью, если предоставленные выкладки содержат ошибки или недоработки.

    CSS: inherit, initital, unset, all

    Сегодня я расскажу о четырех интересных ключевых словах CSS. Начнем!

    Ключевое слово: inherit

    Сразу рассмотри пример:

    В результате элемент span будет наследовать свойство font-size от родительского элемента. Если у родительского элемента не определено свойство font-size, тогда элемент span будет использовать вычисленное у родителя свойство font-size (которое может быть унаследовано от другого родителя).

    Слово inherit может пригодиться, когда вы хотите присвоить одно и тоже значение на кучу дочерних элементов. Например:

    Теперь все элементы div внутри module будут наследовать значение свойства box-shadow.

    Ключевое слово: initial

    Ключевое слово initial впервые появилось в CSS3. Каждое CSS свойство имеет начальное значение или значение по умолчанию.

    Определяя значение свойство используя ключевое слово initial, вы говорите браузеру: «используй значение свойства по умолчанию».

    Например, вы можете захотеть использовать значение цвета по умолчанию:

    Элемент example будет иметь цвет такой же, как установлен в body. Таким образом мы сбросили другой цвет этого элемента, например, который наследовался от родительского элемента и был красным.

    Что касается поддержки браузерами: initial работает в последних версиях Chrome и Firefox. Насчет остальных браузеров я не уверен.

    Ключевое слово: unset

    Различие между unset и initial в том, что значения, которые могли быть унаследованы элементом, сбрасываются.

    Свойство: all

    Свойство all сбрасывает все свойства элемента.

    В спецификации сказано:

    «Данное свойство может использоваться для элементов виджетов на странице, где нежелательно наследовать стили страницы».

    Спасибо за внимание!

    Подписывайтесь на рассылку! ��

    Автор статьи: Alex. Категория: CSS
    Дата публикации: 29.09.2013

    Пользовательские свойства CSS

    Опрос Эшли Нолана в ноябре 2020 года показал, что 84% фронтенд-разработчиков используют CSS-препроцессор. В то же время самой полезной возможностью препроцессоров разработчики считают переменные. Это неудивительно. Переменные помогают упорядочить код, избежать дублирования, улучшают читаемость, делают проще рефакторинг.

    У препроцессорных переменных есть ограничения: они ничего не знают о структуре DOM, не работают в псевдо-классах и медиа-запросах, их нельзя прочитать или изменить с помощью JavaScript.

    Но главный недостаток препроцессоров — стили нужно компилировать, нельзя запустить код сразу в браузере.

    На эту тему рекомендуем посмотреть доклад Вадима Макеева «Мой ванильный CSS»

    Пользовательские свойства CSS (CSS custom properties) выполняют функцию нативных переменных в CSS и не имеют указанных ограничений. А с недавних пор они поддерживаются всеми современными браузерами. В этой статье мы научимся объявлять и использовать пользовательские свойства.

    Объявление и использование

    Объявить пользовательское свойство можно с помощью двойного дефиса (—):

    Вы можете спросить, а почему не @ как в LESS, или $ как в Sass, ведь это гораздо приятнее глазу? Такой синтаксис позволяет использовать нативные переменные вместе с любым препроцессором, и они не будут компилироваться и попадут в неизменном виде в результирующий CSS.

    Автор спецификации Таб Аткинс в своем блоге объясняет выбор синтаксиса для пользовательских свойств.

    Если мы используем $ foo для переменных, мы не сможем использовать его для будущих «похожих на переменные» вещей.

    Имя пользовательского свойства чувствительно к регистру. Свойство —main-color — это не то же самое, что —Main-color .

    Значением пользовательского свойства может быть любое допустимое в CSS значение: цвет, строка, ключевое слово, даже выражение.

    Допустимо даже такое значение свойства:

    С точки зрения CSS это некорректное значение, но его потенциально можно прочитать и обработать из JavaScript. Это открывает простор для фантазии разработчиков.

    Получить значение пользовательского свойства можно с помощью функции var().

    Обратите внимание на второй аргумент функции var(). Его значение выполняет роль фоллбэка и применяется, когда переменная не определена. В качестве фоллбэка может использоваться значение другой переменной:

    В примере выше мы намеренно не задали значение переменной с помощью выражения —color:; . Это означает, что переменная объявлена, но не определена. Не путайте с —color: ; — здесь значением переменной является пробел, а это некорректное значение.

    Значение пользовательского свойства можно использовать для объявления другого свойства.

    Значения пользовательских свойств можно складывать, вычитать, умножать и делить с помощью функции calc() .

    Область видимости и наследование

    Переменные в Sass, как и в других препроцессорах, существуют вне селектора. Такие переменные считаются глобальными. Пользовательские свойства можно объявлять только внутри селектора. Этот селектор ограничивает область видимости свойства. Спецификация рекомендует использовать псевдо-класс :root для объявления глобальных пользовательских свойств.

    Пользовательские свойства подчиняются правилам каскада и наследуются до последнего потомка.

    Использование ключевых слов

    Пользовательские свойства CSS подчиняются тем же правилам, что и обычные свойства. Это означает, что вы можете назначить им одно из ключевых слов:

    • inherit — применяется значение родительского элемента.
    • initial — применяется начальное значение, определенное в спецификации CSS (пустое значение или ничего для пользовательских свойств CSS).
    • unset — применяется унаследованное значение, если свойство наследуется (как в случае пользовательских свойств) или начальное значение, если свойство не наследуется.
    • revert — сбрасывает свойство к значению по умолчанию, установленному таблицей стилей браузера (пустое значение в случае пользовательских свойств).

    Установить для всех свойств начальное значение можно с помощью свойства all :

    Но этот способ не применяется для пользовательских свойств. В сообществе идет обсуждение возможности сбросить значения всех переменных с помощью свойства — , но это пока только дискуссия:

    Отличия пользовательских свойств от препроцессорных переменных

    Несколько отличий пользовательских свойств от препроцессорных переменных мы уже рассмотрели в предыдущих разделах. Самое очевидное отличие: пользовательские свойства не нужно компилировать, их значения обрабатываются браузером.

    Значения пользовательских свойств подставляются во время выполнения, поэтому могут изменяться «на лету» и использоваться в медиа-запросах.

    — IMG —
    Крис Койер показал пример использования пользовательских свойств в медиа-запросах.

    По той же причине препроцессорные переменные не могут использоваться в псевдо-классах, а пользовательские свойства прекрасно с этим справляются.

    Поскольку пользовательские свойства CSS — это такие же свойства, доступ к ним можно получить из JavaScript с помощью API CSSStyleDeclaration.

    Поддержка

    Desktop

    Chrome Opera Firefox IE Edge Safari
    49 36 31 No 15 9.1

    Mobile

    iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
    9.3 37 No 56 57 52

    Если вам нужна поддержка старых браузеров, можно использовать пользовательские свойства параллельно с препроцессорными, а поддержку проверять с помощью директивы supports :

    Можно трансформировать код с CSS-переменными, например, с помощью плагина postcss-custom-properties. Но, в отличие от компиляции препроцессором, плагин позволяет сохранить переменные м вызовы функции var() для тех браузеров, которые их поддерживают.

    Дополнительные материалы

    Отличные подробные статьи на английском языке:

    Также советуем посмотреть доклад Павла Ловцевича «Пользовательские свойства как основа архитектуры CSS» с FrontTalks, где он подробно рассказывает о том, почему пользовательские свойства крутые.

    В Firefox с 2014 года, в Chrome и Safari с марта 2020 года, в Edge с апреля 2020 года (Источник: CanIUse)

    Нашли опечатку? Orphus: Ctrl+Enter

    © getinstance.info Все права защищены. 2014–2020

    Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

    Использование CSS

    Каскадные таблицы стилей (CSS) представляют собой язык описания внешнего вида Web-документов.

    Преимущества каскадных таблиц стилей (CSS)

    Неодобрению подверглось большинство элементов форматирования HTML версии 4.0, и Консорциум W3C запретил их использовать. Web-дизайнерам стали рекомендовать к использованию CSS (Cascading Style Sheets — каскадные таблицы стилей).

    Главные преимущества которых заключаются в:

    1. Более чистом коде, который:
      • легко поддерживается;
      • быстрее загружается;
      • лучше оптимизирован для поисковых систем.
    2. Модульном коде, для которого характерны:
      • возможность применения правил стиля ко множеству страниц;
      • единообразный дизайн;
      • код легче поддерживается.
    3. Силе дизайна, включающей в себя точность контроля (позиционирование, размер, поля и др.).
    4. Разделении труда.
    5. Лучшей доступности, для которой характерно:
      • использование тегов по назначению;
      • отсутствие необходимости в позиционировании невидимых картинок;
      • возможность переписывания пользователями стилевых таблиц автора.

    Попробуй обратиться за помощью к преподавателям

    Правила CSS

    Этими правилами определяются стили элементов или групп элементов.

    В правилах используется следующий синтаксис:

    Все пары, указанные в фигурных скобках, представляют собой декларации. Селектором определяются элементы, на которые воздействуют эти правила. Приведем пример правила:

    Этим правилом определяется цвет текста во всех параграфах (темно-зеленый), его размер (10 точек), шрифт текста (Verdana).

    Комментарии в CSS

    В CSS они начинаются символом «$/*$» и заканчиваются «$*/$». Например:

    color:red; $/*$ Текст во всех параграфах должен быть красного цвета $*/$

    CSS применяют в HTML или XHTML, используя методы связывания (linking), внедрения (embedding) и встраивания (inlining).

    В связанном методе таблицы стилей создаются и хранятся в отдельных файлах с расширением .css . Их называют связанными (внешними) стилями.

    Задай вопрос специалистам и получи
    ответ уже через 15 минут!

    Во внедрённом методе CSS хранятся в виде HTML-страниц в теге между тегами и представляют собой внедрённые (внутренние) стили.

    Встроенный метод CSS хранится непосредственно в атрибуте стиля HTML и называется встроенным стилем, например:

    Наиболее используемым является первый метод.

    Связывание

    CSS хранятся в отдельном файле, для ссылки на который используется тег между тегами , как показано ниже, который предполагает, что таблица стилей хранится в файле с именем «style.css».

    Тег link состоит из 3 атрибутов:

    • rel сообщает браузеру тип и цель ссылки;
    • type сообщает браузеру MIME-тип подключаемого файла;
    • href сообщает браузеру URL для нахождения файла (в данном примере URL относительный, а может быть и абсолютным).

    В «style.css» содержится одно правило, указывающее на то, что текст в параграфе должен отображаться полужирным шрифтом:

    Встраивание

    Пример встраивания правила приведен в теге:

    Внедрение

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

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

    CSS находится в элементе . Атрибутом type=»text/css» браузеру сообщается, что внедрённый стиль написан на CSS и должен быть использован для форматирования страницы. А стилевое правило p указывает браузеру выполнить выделение всего текста в любом параграфе полужирным шрифтом.

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

    Сокращение времени загрузки веб-страниц с помощью CSS

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

    1. Нужно избегать по возможности использование таблиц при разметке страницы.
      • Приведем причины, по которым лучше использовать CSS для разметки страниц:
      • браузерами анализируются таблицы дважды: первый раз для оценки структуры таблицы, а второй — для определения их содержимого;
      • таблицы отображаются сразу полностью, а не по мере загрузки;
      • в таблицах используются прозрачные картинки для определения ширины колонок и т.п.;
      • для CSS характерен гораздо меньший код, который выносится во внешний файл, загружаемый всего однажды и хранящийся в кэш-памяти браузера;
      • CSS позволяет осуществлять контроль очередности загрузки элементов страницы.
    2. Не нужно использовать картинки при отображении текста. Большинство кнопок и надписей отображаются с помощью CSS.
    3. Загрузку картинок, в том числе и фоновых изображений, лучше осуществлять с помощью CSS. К примеру, для отображения картинки размером 200х100, можно использовать следующий код:

    , которому соответствует код CSS: pretty-image

    Этот способ значительно ускорит загрузку страницы. Браузер станет загружать картинку только после вывода всего текста, а не одновременно, что обеспечит пользователю возможность работы со страницей в ходе окончательной загрузки изображения. Использование данной техники оптимально при загрузке декоративных, фоновых элементов страницы.

    Используйте контекстные стили. Вместо присваивания класса каждому параграфу, их можно сгруппировать в одном элементе DIV с тем же классом:

    Данный код укажет браузеру, что каждый параграф внутри элемента с классом text будет иметь цвет #03c и размер шрифта в 2em.

  • Используйте сокращения при указании шрифтов, границ, фона.
  • Минимизируйте пробелы, переводы строк и комментарии. Каждый лишний символ будет увеличивать размер страниц. Поэтому необходимо как можно меньше нажимать клавиши Enter и Tab в процессе вёрстки. А также важно не забывать про объединение CSS-стилей.
  • Важно использование относительных ссылок, так как абсолютные занимают намного больше места и создают дополнительную нагрузку на браузер.
  • Не нужно увлекаться использованием META-тегов.
  • Необходимо выносить CSS и JavaScript в отдельные файлы.
  • Нужно ставить знак «/» в конце ссылок на каталоги.
  • Этот знак сразу дает понять, что указанная ссылка ведет в каталог, и необходимости в дополнительной проверке нет.

    Так и не нашли ответ
    на свой вопрос?

    Просто напиши с чем тебе
    нужна помощь

    Топ-пост этого месяца:  Особенности использования переменных CSS подробные примеры кода
    Добавить комментарий