Что такое переменные CSS преимущества и основные принципы использования


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

Статьи

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

CSS (Cascading Style Sheets в переводе от Английского языка означает — каскадные таблицы стилей) — они используются для описания внешнего вида веб-страницы, написанного языком разметки. CSS стили используются для оформления веб-страниц и чаще всего они используются для формата HTML и XHTML, но также могут применяться и с документами в формате XML. CSS стили хранятся в отдельном документе, который имеет формат «имя.css» это дает возможность воспользоваться одними и теми же стилями, но уже к разным страницам.

Расскажу немного предыстории.

С самого начала HTML предназначался лиш для передачи сематики документа и его структуры. В те времена все браузеры должны были отображать только макет (основную структуру сайта) не имеющую как сейчас различных картинок и множества стилизаций. Но вскоре все резко изменилось, и пришли эти изменения тогда, когда два крупнейших браузера в то время Netscape и Internet Explorer ввели поддержку своих тегов, таких как верстка , один давал возможность вставлять в код изображения, а другой придавал шрифту цвет. Но в итоге эти изменения привели к огромным проблемам в отображение тегов в других менее известных браузерах. Вот тогда в мире и началась глобальная война за кроссбраузерность, которая мучит разработчиков и в наше время. Это мучило всех и доставляла множество проблем, и тогда W3C всерьез взялась за эту проблему и ее решение не заставило себя ждать. Было принято решение отделить содержание страницы от визуального оформления. В 1996 году W3C создало CSS. Все основные браузеры в самые быстрые сроки приняли данное решение. Но CSS не было идеальным и поэтому в 1998 году выходит новая доработанная W3C версия CSS 2.0, а после чего и CSS 2.1. Думаю сейчас уже ни для не секрет, что медленными но уверенными шагами на свет выходит CSS 3.0. Новый стандарт принесет достаточно много значимых изменений, которых уже так долго все ждали. Некоторые возможности нового CSS 3.0 уже работают во всех последних версиях браузеров.

Преимущества CSS

Простота использования.

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

Значительное уменьшение размера сайта.

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

Дополнительные возможности стилизации.

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

Без табличная структура макета.

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

Недостатки CSS

К сожалению у CSS есть и свои недостатки, недостатком CSS является ее кроссбраузерность (разное отображение в разных браузерах). Данная проблема особенно актуально в устаревших браузерах таких как IE 6.0, Opera 9 и т.д. Вот и все друзья, ждите новых интересных статей, они не заставят вас ждать.

Каскадные таблицы стилей (преимущества и недостатки)

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

Каскадные таблицы стилей (Cascading Style Sheets), декларируемые как средство полного контроля над HTML-разметкой, представляются в свете рассматриваемой проблемы, как хороший инструмент для организации точного расположения объектов на странице. CSS позволяют переопределить все свойства любого тега, назначаемые по умолчанию. Становится возможным выполнять выравнивание текстового блока относительно страницы и других текстовых блоков.

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

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

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

Остановимся подробнее на способах применения CSS. Существует четыре способа применения стилей:

  1. Переопределение стиля в элементе разметки
  2. Размещение описания стиля в заголовке документа с использованием тега style
  3. Размещение ссылки на внешнее описание через тег link
  4. Импорт стиля в документ

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

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

Когда одни и те же стили используются на нескольких или всех страницах сайта, не обязательно определять их в каждом html-документе. Достаточно сохранить их в отдельном файле и ссылаться на него в каждом документе с помощью тега link, стоящего в элементе head (до тега body). Атрибут rel при этом должен иметь значение «stylesheet».

Возможно также произвести импорт стиля в документ. Отличие от ссылки на внешнее описание в том, что импорт стиля может быть произведен внутрь элемента style или внутрь внешнего файла с описанием стилей, задаваемого в теге link. Таким образом можно создать внешний файл для внешнего файла. Инструкция импорта стиля ставится перед всеми остальными описателями стилей, что делает возможным легко переопределить импортируемый стиль.

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

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

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

Каскадные таблицы стилей — перспективная технология. Но многие веб-мастеры пока еще ограничиваются только применением CSS для изменения цвета гиперссылки при подведении к ней указателя мыши.

Каковы преимущества и недостатки CSS-переменных?

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

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

Меняя одну тему на другую, можно внести ряд изменений (таких как размер шрифта, цвет шрифта, ширина рамки и т. Д.), Не меняя слишком много кода.

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

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

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

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

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

Есть какие-нибудь мысли о плюсах / минусах этого?

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

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

Топ-пост этого месяца:  Лучшие плагины jQuery в 2020г

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

Вы можете быть заинтересованы в проверке LESS :

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

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

Я не вижу каких-либо улучшений по сравнению с наличием различных css-файлов для тем: вы говорите, что просто добавляете некоторые переменные для изменения шрифтов, цветов и тому подобного. А как насчет границ, выравнивания и многих других вещей? Темы — это не просто 2-3 цветовые переменные. Тема для большой веб-страницы может иметь довольно большие размеры, и разные темы для одной и той же страницы могут отличаться не только несколькими цветовыми кодами. Я не думаю, что это хорошая идея. Пусть дизайнеры внешнего интерфейса просто создают различные css-файлы для тем и загружают css-файлы, принадлежащие теме.

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

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

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

Я просто хотел бы немного умерить свой ответ. С технической точки зрения это может быть хорошей идеей — в зависимости от того, насколько хорошо вы управляете своей средой, насколько вы способны отслеживать свои шаги и многое другое. По сути, это тип внешнего DSL, который может быть очень мощным инструментом. Я не думаю, что применил бы это здесь, так как вы нацелены (на фронтенд) разработчиков, и я думаю, что внешние DSL лучше использовать для администраторов / не разработчиков. Но это может быть успешно использовано.

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

Переменные CSS

Переменные CSS

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

Чтобы решить эту проблему и были придуманы переменные для стилей. Эта фишка появилась еще в 2012 году (именно тогда вышел первый рабочий черновик W3C), но тогда поддержка браузерами практически отсутствовала, что по сути делало ее бесполезной. Сейчас, по прошествии времени ситуация с кроссбраузерностью значительно улучшилась.Согласно сервису CanIUse, переменные (CSS vairiables или, как их еще называют custom properties — пользовательские свойства ) поддерживаются основными браузерами: Edge, Firefox, Chrome, поэтому их вполне можно использовать в реальных проектах. Давайте же рассмотрим поподробнее, что они из себя представляют и как их можно применить в стилях.

Что такое переменные CSS?

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

Как использовать переменные?

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

Оказывается, всё довольно просто. Переменные нужно объявлять внутри селекторов, при этом они выглядят практически как обычные свойства, за исключением двух дефисов перед именем. Именно так мы указываем, что речь идет о переменной, значение которой нужно запомнить. В примере ниже наша переменная bg принимает значение lightblue .

Если же мы хотим присвоить переменную какому-либо свойству, нужно просто вызвать ее внутри функции var() там, где нужно указать значение свойства (мы присвоили значение —bgd цвету фона в селекторе div , теперь фон всех дивов будет светло-голубой, а абзацу мы присвоили цвет фона —bgp и элементы p будут светло-зеленого цвета).

Css переменные : описание и примеры использования.

Здравствуйте друзья, на связи Шевченко Вячеслав, и сегодня у меня не большой, но интересный пост. Вы когда нибудь сталкивались с проблемой разрастания проекта, и организацией css кода? Думаю ответ однозначно ДА, если НЕТ, то у вас все впереди.

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

Знающие и бывалые верстальщики, могут возразить и сказать «Переменные уже давно в SASS и LESS!!». Да, я не спорю, но это препроцессоры и они нуждаются в компиляции перед использованием, а нативные переменные CSS работают прямо в браузере! Разве это не круто?

Видео урок

Объявление и использование CSS переменных

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

Важнейшие практические принципы CSS кодирования, которые вредят нам

Перевод статьи: Our (CSS) Best Practices Are Killing Us.
Автор: Nicole Sullivan.

Ранее в этом году, готовясь к выступлению на Webstock ( *Статья была опубликована автором в апреле 2011 года. ), я вдруг осознала, что мне придётся отменить запланированную речь. Я передумала делать доклад на тему «Ошибки масштабного CSS кодирования», так как поняла, что суть затрагиваемой в нем проблемы лежит намного глубже, чем это кажется на первый взгляд. Дело в том, что те принципы, которые по нашему мнению являются лучшими решениями большинства проблем, в действительности приводят к нежелательным результатам, которых мы изначально пытаемся избежать. И я осознала, что, несмотря на то, что это противоречит давно устоявшемуся суждению, в данном конкретном случае «упорство и труд ничего не перетрут». Каждый раз, начиная новый проект, мы обещаем себе, что «на этот раз я приложу все усилия, чтобы мой код был максимально четким и понятным», что «этот проект будет блестящим примером эффективного использования CSS ». И со временем, в процессе добавления нового контента на сайт и его усовершенствования, некогда чистый код медленно, но уверенно превращается в запутанный клубок, состоящий из множества дублирующих фрагментов, усугубляя проблему своей непредсказуемостью.

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

Какие же из устоявшихся тенденций практического кодирования можно отнести к категории проблемных? Вот они:

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

Classitis!

Откуда, скажите на милость, мы можем знать какие аспекты CSS кодирования абсолютно положительны, а какие из них являются воплощением зла? Кто принимал эти решения и чем при этом руководствовался? Совпадают ли приследуемые ими цели с нашими? Поверьте, нет ничего плохого в использовании классов. В подавляющем большинстве случаев имена классов более полезны и влекут за собой меньше непредсказуемых последствий, чем использование идентификаторов ( ID ) или селекторов названий элементов ( p , img , span и т.д.).

При помощи классов вы можете определять стили практически в любой ситуации. Суть в данном случае заключается в том, чтобы создать некий баланс между слишком объемными правилами классов, так называемыми «свалками», и слишком бедными в плане содержания классами. Другими словами, вы не должны использовать на столько скудные правила классов, каждое из которых содержит лишь одну пару свойство:значение . Имея в своем распоряжении набор экстремально маленьких классов с правилами, содержащими минимальное количество определений, вам будет чрезвычайно сложно удовлетворять требованиям дизайна в процессе его дальнейшего развития.

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

Классы – это наши лучшие друзья. А вот случаи множественного использования идентификаторов ( ID ) элементов, вот это действительно катастрофа. Избегайте такого стиля кодирования:

Никогда не используйте дополнительные не семантические элементы.

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

Если не расположить, скажем, элемент параграф

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

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

Но вы ведь хотите максимально эффективно использовать возможности HTML в своей разметке, применяя широкий набор элементов, таких как

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

Не допускайте применение не семантических имен классов.

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

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

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

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

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

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

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

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

Насколько я помню, единственным случаем, когда лично я допускаю использование селектора потомка совместно с селектором элемента – это стилизация элементов списка (
), и даже в этом случае мне достаётся, если кто-нибудь захочет использовать вложенные списки. Можно с уверенностью сказать, что было бы не лишним введение некоторого улучшения поддержки дочерних селекторов, направленного на упрощение подобного рода стилизации. А в идеале мы вообще не должны допускать случаи наследования стилей элемента контейнера его контентом.

Возьмем пример привязки стилей с использованием медиа блока ( @media ), то есть когда вы, допустим, рассматриваете вопрос стилизации изображения с помощью имени класса, применяемого в рамках определенного медиа блока. Да, это звучит вполне резонно до тех пор, пока мы вдруг не осознаем, что изображение, по сути, само по себе является отдельным объектом. И если вам в последующем понадобиться использовать конструкцию из нескольких вложенных медиа блоков, то ваши ожидания не будут оправданы и требуемые стили к вашему элементу изображению применены не будут. Проблему можно решить, если имя класса использовать в связке с названием элемента (в нашем случае изображением) — img.className .

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

Отображение сайта должно быть абсолютно одинаковым во всех браузерах.

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

Использование переменных в CSS

На этой странице

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

CSS переменные (пользовательские CSS-свойства) это сущности, определяемые автором CSS, хранящие конкретные значения, которые можно повторно использовать в документе. Они устанавливаются с использованием custom property нотации ( например. —main-color: black; ) и доступны через функцию var() ( например. color: var(—main-color); ) .

Сложные веб-сайты имеют очень большое количество CSS, часто с множеством повторяющихся значений. Например, один и тот же цвет может использоваться в сотнях разных мест, что требует глобального поиска и замены, если этот цвет необходимо изменить. CSS переменные позволяют сохранять значение в одном месте, а затем многократно использовать его в любом другом месте. Дополнительным преимуществом являются семантические идентификаторы. Для примера: запись —main-text-color более понятна, чем #00ff00 , особенно если этот же цвет используется и в другом контексте.

CSS переменные подчиняются каскаду и наследуют значения от своих родителей.

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

Note: В более ранней спецификации префикс для переменных был var- , но позже был изменен на — . Firefox 31 и выше следуют новой спецификации.(баг 985838)

Первый шаг с CSS Переменными

Начнем с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:

Мы применим его к этому HTML:

что приводит нас к этому:

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

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

Наследование переменных в CSS и возвращаемые значения

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

со следующим CSS:

В результате var(—test) будет:

  • для элемента с классом : 10px
  • для элемента с классом : 2em
  • для элемента с классом : 10px (унаследовано от родителя)
  • для элемента с классом : недопустимое значение, что является значением по умолчанию для любого пользовательского свойства.

Используя var() вы можете объявить множество возвращаемых значений когда данная переменная не определена, это может быть полезно при работе с Custom Elements и Shadow DOM.

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

В замещаемых значениях можно использовать запятые по аналогии с пользовательскими свойствами. Например, var(—foo, red, blue) опеределит red, blue как замещающее значение (от первой запятой и до конца определения функции)

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

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

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

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

Совместимость с браузерами

Особенность Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовая поддержка (Да) -webkit
33.0
Нет 34.0 [2]
49.0
(Да) 29 (29) [3]
31 (31)
Нет 36.0 9.1
Особенность Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Базовая поддержка Нет 49.0 (Да) 29 (29) ? ? 9.1 49.0

[1] Chrome initially implemented this feature using a different syntax, which required to prefix custom property names with -webkit-var- to define them. They could then be used unprefixed within a -webkit-var() function. Additionally, the implementation was hidden behind the Enable experimental WebKit features flag under chrome://flags , later renamed to Enable experimental Web Platform features.

[2] В Chrome 34.0 убрали эту функцию из-за проблем с производительностью.

Что такое CSS?

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

Что же такое CSS? Расшифровывается эта аббревиатура как Cascading Style Sheets (Каскадные таблицы стилей).

Отличие HTML от CSS.

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

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

Использование двух методов описания Web-страницы позволяет работать отдельно с содержанием (HTML) и дизайном страницы (CSS).

Преимущества CSS.

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

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

  • Разделение оформления и содержания позволяет работать над дизайном и контентом сайта параллельно.
  • Единство дизайна. Сайт состоит из множества страниц, и законы web-дизайна требуют, чтобы все они были оформлены в едином стиле. Это улучшает восприятие сайта и облегчает работу с ним. При использовании CSS описание всех стилей находится в одной таблице, которая управляет отображением множества HTML-документов. Например, чтобы на всем сайте изменить цвет заголовков, достаточно изменить одну строчку в таблице стилей. Если же цвет описывается с помощью тэгов HTML, то для его изменения придется переделывать все страницы, которых может быть очень много. Таким образом, CSS дает возможность более точного контроля над внешним видом сайта.
  • Централизованное размещение. Благодаря применению CSS можно создать четкую файловую структуру сайта. Обычно все файлы с таблицами стилей располагают в одной папке, что позволяет легко находить их при работе над дизайном.
  • Использование разных стилей. Как уже говорилось, сайт можно просматривать на различных устройствах, например, на большом мониторе настольного компьютера и маленьком экране мобильного устройства. Чтобы это было удобно, можно использовать разные таблицы стилей, изменив всего одну ссылку.
  • Более широкие возможности для дизайнера. Так как язык CSS создан специально для оформления сайта, то он имеет гораздо больше возможностей для решения дизайнерских задач. Благодаря технологии CSS более гибкая блочная верстка сайтов почти совсем вытеснила устаревшую табличную верстку.
  • Ускорение работы. Так как таблица стилей хранится в отдельном файле, при просмотре сайта этот файл сохраняется в кэше компьютера, и при повторном посещении этого сайта загрузка происходит быстрее.

Изучение CSS.

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

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

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

Еще раз повторяю ссылку на скачивание курса.

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

Если вас заинтересовала статья, или вам есть, что добавить, оставьте комментарий.

Проголосуйте за статью, нажмите кнопку социальной сети.

Использование CSS переменных в разработке сайтов

Читая на днях невероятно полезный сайт caniuse.com, я был приятно удивлен, что CSS переменные уже поддерживаются всеми основными браузерами, кроме одного. А это значит, что мне стоит рассмотреть их использование в современной разработке, поскольку в недалеком будущем это станет обычной практикой.

Не впервой

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

Так же стоит упомянуть, что переменные Sass и CSS – это разные звери: они по-разному пишутся и, не смотря на то, что у них есть некоторые сходства, CSS переменные могут то, чего не могут переменные Sass, и наоборот.

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

Цвета

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

  • Универстальный селектор (*)
  • body
  • :root
  • Классы
  • Селекторы

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

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

В отличие от других CSS свойств, переменные чувствительны к регистру: —alert и —Alert – это разные переменные.

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

Элементу h3 будет задан цвет, соответствующий переменной —alert.

Единицы изменения

Переменные могут использоваться в значениях свойств, состоящих из нескольких компонентов:

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

А вот так можно:

Переменные можно использовать с функцией calc:

У элемента с классом .subtle border-radius будет 4px.

Места использования

Переменные можно задавать и использовать не только в таблице стилей. Встроенные или inline переменные тоже валидны. Например, в подключенном CSS:

Или в HTML, inline ссылка на переменную:

Ключевые значения

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

Эти переменные могут быть использованы где угодно в CSS:

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

К тому же, CSS переменные можно использовать внутри @media queries, это значительное преимущество по сравнению с Sass переменными.

Переменные сегодня

На данный момент, Microsoft Edge / IE – единственный браузер, который не поддерживает CSS переменные, но в Edge стоит пометка «в разработке». Это значит, что скоро разработчики смогут использовать переменные в своем коде. А пока что есть два варианта:

1. Использовать пост-препроцессоры с поддержкой CSS переменных.

Напишите CSS, перекомпилируйте его с помощью PostCSS и добавьте cssnext, на выходе вы получите нужный CSS код.

Результат на CSS:

В этом случаи нужно, чтобы все изменения в коде обрабатывались через cssnext. Альтернатива:

2. Используйте @supports

Можно использовать @supports, чтоб определить, поддерживает ли браузер CSS переменные:

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

Каскадные таблицы стилей (преимущества и недостатки)

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

Каскадные таблицы стилей (Cascading Style Sheets), декларируемые как средство полного контроля над HTML-разметкой, представляются в свете рассматриваемой проблемы, как хороший инструмент для организации точного расположения объектов на странице. CSS позволяют переопределить все свойства любого тега, назначаемые по умолчанию. Становится возможным выполнять выравнивание текстового блока относительно страницы и других текстовых блоков.

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

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

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

Остановимся подробнее на способах применения CSS. Существует четыре способа применения стилей:

  1. Переопределение стиля в элементе разметки
  2. Размещение описания стиля в заголовке документа с использованием тега style
  3. Размещение ссылки на внешнее описание через тег link
  4. Импорт стиля в документ

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

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

Когда одни и те же стили используются на нескольких или всех страницах сайта, не обязательно определять их в каждом html-документе. Достаточно сохранить их в отдельном файле и ссылаться на него в каждом документе с помощью тега link, стоящего в элементе head (до тега body). Атрибут rel при этом должен иметь значение «stylesheet».

Возможно также произвести импорт стиля в документ. Отличие от ссылки на внешнее описание в том, что импорт стиля может быть произведен внутрь элемента style или внутрь внешнего файла с описанием стилей, задаваемого в теге link. Таким образом можно создать внешний файл для внешнего файла. Инструкция импорта стиля ставится перед всеми остальными описателями стилей, что делает возможным легко переопределить импортируемый стиль.

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

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

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

Каскадные таблицы стилей — перспективная технология. Но многие веб-мастеры пока еще ограничиваются только применением CSS для изменения цвета гиперссылки при подведении к ней указателя мыши.

Добавить комментарий