CSS из будущего


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

Будущее CSS3: взгляд на перспективные техники

vladimir пн, 02/04/2013 — 21:15 CSS3

С новым годом приходит и надежда на всё большую поддержку новыx web-стандартов браузерами. Только в ноябре прошлого года была опубликована новая спецификация: The CSS Mask Specification (CSS маски). Браузеры на движках webkit уже давно поддерживали технологию css масок, сейчас же данная спецификация означает, что механизм масок будет реализован во всех браузерах.

CSS маски

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

Итак, что же представляют из себя маски? Проще говоря, в маске должен быть элемент или изображение, а также изображение, представляющее из себя чёрную или белую фигуру с прозрачным фоном. Если применить маску к изображению или элементу, то они будут отображаться в маскированном виде. Это значит, что чёрные или белые области на изображении-маске будут заменяться изображением, по отношению к которому применяется маска. Пример:

Применение масок

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

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

Применение масок браузерами webkit

Маски легко использовать в webkit, достаточно использовать свойство mask .

Рассмотрим пример. Маска-изображение (будем использовать альфа-маску, поэтому лучший вариант – чёрная фигура на прозрачном фоне):

Допустим есть изображение:

Итак, в браузерах семейства webkit получаем:

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

CSS-исключения

Css-исключения имеют слабую поддержку, но это свойство поможет улучшить дизайн содержимого сайтов. Используя всего одно свойство, можно изменить всю структуру документа, аналогично редактированию документа в редакторе WYSIWYG. Как же работают css исключения? Наиболее интересным свойством является wrap-flow .

wrap-flow

wrap-flow определяет какое влияние будет оказывать блок на другие блоки. Обычно, когда вы перемещаете один элемент на другой (используя position relative), блоки будут перекрываться. Однако, используя wrap-flow, другие элементы будут вынуждены адаптироваться, чтобы соответсвовать элементу расположенному выше.

wrap-flow может иметь достаточно много настроек. Значения могут быть установлены в аuto , start , end , both , minimum , maximum или clear .

  • auto: обычное поведение, ни один элемент не будет менять свое поведение
  • start: все что находится после элемента удаляется
  • end: все что находится до элемента удаляется
  • both: удаляется только содержимое расположенное под объектом
  • minimum: сторона с наибольшим содержимым удаляется
  • maximum: сторона с наименьшим содержимым удаляется
  • clear: всё содержимое удаляется c двух сторон от объекта

Всё это достаточно сложно опиcать. Рассмотрим пример:

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

Компоновка и смешивания

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

Можно уже сейчас попробовать режимы смешивания CSS в действии. Для этого нужно скачать Adobe’s experimental webkit browser. Затем посетить эту страницу с помощью экспериментального браузера чтобы посмотреть всё это в действии!

означало « шрифт побольше», когда для добавления фона использовались теги

, а самым изысканным инструментом вёрстки у дизайнеров были HTML-таблицы. Конечно же, с прозрачными однопиксельными распорками внутри:)

CSS, уровень первый

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

На тот момент в CSS не было настоящих инструментов разметки страницы. Были свойства width и height , заменившие одноимённые атрибуты HTML, а также свойство float , заменившее атрибут align у элементов и

.

Оно не предназначалось — да и не использовалось тогда — для размещения блоков, а предназначалось для врезок. Таких, знаете, которые обтекаются текстом. Общепринятым способом обработки 2D-макетов оставались таблицы​​, больше ничего не было. И, конечно, свойства margin и padding , обеспечивающие столь необходимое освобождение от GIF-распорок и тегов
. Сейчас эти вещи кажутся для нас очень простыми, но тогда они были революционными:)

CSS, уровень второй

C выпуском CSS2 в 1998 году, W3C привнёс в CSS шедевральный инструмент разметки: вы могли превратить любой набор HTML-элементов в табличный вид. Вместе с остальными значениями свойства display , CSS2 обеспечивал независимость вёрстки от используемых тегов, позволяя авторам использовать в вёрстке более семантичную разметку. Списки в навигационных меню теперь могли отображаться в виде вкладок, а равновысотные колонки превращались в CSS2 в строку:

К сожалению, несмотря на кросс-браузерную поддержку в Gecko, Opera и KHTML/WebKit, отсутствие поддержки table-cell в IE вплоть до версии делало CSS-таблицы непригодными для использования на вебе.

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

Сегодня CSS-вёрстка в основном состоит из этого. Это — нецелевое использование доступных средств, всё равно, что строить дом из швабр и изоленты. Хитро, мудрено, но понять и осмыслить сложно.

Давайте посмотрим, чем была занята Рабочая группа CSS в то время.

Вернёмся в Башню из слоновой кости…

Между тем, Рабочая группа CSS начала работу над CSS3, и некоторые основные модули, типа селекторов и цветов, были почти готовы. Однако, вскоре мы поняли, что сейчас гораздо важнее обеспечить переносимость между браузерами. CSS 2.0 кишел ошибками и разночтениями, и включал в себя несколько функций, никем не реализованных. Браузеры также изобиловали багами и глюками, что делало кроссбраузерную вёрстку настоящим кошмаром.

Так в 2002 году Рабочая группа CSS приступила к пересмотру CSS 2, начав долгий процесс затыкания дыр, исправления ошибок, а также разработки тестов для основных стандартов CSS. Между тем, усилия евангелистов, такие как Acid2-тест, помогли разработчикам браузеров сфокусироваться на улучшении поддержки CSS в своих продуктах.

Это не было очень интересным временем в развитии CSS, но заложило основу для надежных стандартов CSS3. Когда в конце годов работы по CSS2.1 начали сворачиваться, работы по спецификациям и реализации CSS3 снова начали набирать обороты. CSS2.1 был окончательно завершен в мае 2011, и Рабочая группа, наконец, смогла сосредоточить все свои усилия на CSS3.

CSS, уровень третий

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

  • Обработка: вещи вроде селекторов и медиа-запросов.
  • Оформление: такие вещи, как множественные фоны, скругленные углы, рисованные рамки и градиенты.
  • Типографика и интернационализация: вертикальный текст, пользовательские шрифты, переносы строк, выравнивание текста и т.п.
  • И, наверное, самое сложное: Компоновка страницы

( Список составлен в порядке от самых простых до самых сложно реализуемых вещей.)

О вёрстке

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

Глава 10 CSS2.1, которая имеет дело только с расчётами ширины и высоты элементов ( и даже не затрагивает «схлопывания» margin-ов, float с clear и даже таблиц) занимает 18 страниц и является результатом многих, многих часов мучительно подробных технических обсуждений на протяжении более чем десяти лет. И люди до сих пор находят там ошибки, хотя движки браузеров, якобы, давно всё поддерживают.

Вёрстка — это сложно, а вёрстка для веб — ещё сложнее. Давайте поговорим о причинах. Сначала рассмотрим вёрстку печатных изданий, а затем обсудим, почему она отличается от вёрстки для веба.

Веб против Печати

При подготовке макета для печати

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

В печати дизайнер контролирует результат. Но всё не так на вебе.

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

Если контент не вмещается, вы не можете просто обрезать его. Вы не можете его отредактировать. Вы не можете изменить размер страницы, или размер шрифта.

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

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

  • гибкой
  • адаптируемой
  • автоматической
  • надежной

Вёрстка не должна разрушаться, оттого что она загружена в среду, не предусмотренную дизайнером… потому что такое происходит постоянно! Особенно на моём экране, потому что у меня маленький нетбук, и я люблю ставить два окна бок о бок:)

Вёрстка в CSS3: Принципы и проектирование

Окей, давайте поговорим о вёрстке в CSS3.

CSS3 — это первый раз, когда Рабочая группа CSS попыталась создать систему, специально предназначенную для компоновки двумерных макетов. Мы хотим сделать её именно для веб-вёрстки, а это значит, что система нам нужна…

Чтобы макеты изящно адаптировались под различные размеры экрана, размер шрифтов, количество контента и т.д.

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

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

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

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

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

Задача такого солвера — просчёт ограничений для правильного взаимодействия объектов, например, при соударении нескольких тел. При просчёте одного ограничения не возникает особых трудностей, однако при просчете нескольких ограничений, разрешение одного ограничения слегка нарушает остальные и для получения приемлемого результата необходимо произвести просчет всех ограничений несколько раз — т.е. сделать несколько итераций.
(Комментарий мой — jiexa).

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

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

А нам нужны инструменты для вёрстки в двух измерениях.
Вот над чем мы работаем в CSS3.

Вёрстка в CSS3: Новые модули

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

Многоколоночная вёрстка контента

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

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

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

Это означает « Если хватит места, сделай мне штуки 4 ( но не более!) колонок и убедись, что каждая, по крайней мере, 30 em шириной». Вроде того:)

Указанное значение ширины — не абсолютная величина, а просто ориентир.
Если по ширине вмещается 2½ колонки, у вас будет две колонки по 37,5 em шириной каждая.
Если вмещается только половина колонки, у вас будет одна колонка шириной 15 em.

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

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

« Свободные размеры» или Flexbox

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

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

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

Первоначально технология Flexbox предназначалась для отрисовки пользовательских интерфейсов Мозиллы, реализованных на XML + CSS + JS. Так что приёмы компоновки блоков, используемые в интерфейсе браузера, скоро будут доступны и для веб-приложений.

Третий модуль, о котором я хотела бы поговорить, это Grid Layout.

Этот модуль создан путем объединения « предложения по вёрстке» Берта Боса с «предложениями по вёрстке по сетке» от Microsoft. Мы всё еще работаем над их соединением, так что модуль пока не завершен, но он сделает 2D-вёрстку по сетке простой и очевидной вещью при разработке на CSS».

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

Отмечу, что мы еще работаем над точным синтаксисом, так что не надо сразу копипастить примеры!:)

Вы сможете увидеть экспериментальные реализации Grid Layout уже в ближайшем будущем.

Регионы и исключения

Следующий модуль, которого я бы хотела коснуться, — это регионы и исключения.

Это два предложения от Adobe для создания « журнальной» вёрстки. Я хочу показать их, потому что это пример возможностей, которые пришли из печати — они отлично работают в InDesign, но пока ещё не подходят для веба.

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

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

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

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

Медиазапросы

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

К примеру, вот дизайн, который Дивья Маньян, Джейсон Крэнфорд Тиг и я общими усилиями составили для главной страницы Рабочей группы CSS:

[Изменяйте размер окна]
Смотрите, как макет превращается из в двух– и одноколоночный. Это не JavaScript, это всё CSS.

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

Это был краткий обзор новых воможностей CSS — что уже есть, что будет, когда этого можно ожидать, и почему оно ещё не готово.:)

Как развивается CSS-спецификация

Теперь давайте поговорим о том, как новые вещи проходят путь от идеи до реализации в W3C.

Спецификация в W3C проходит через 3 этапа:

  1. — на этапе проектирования
  2. — это этап тестирования
  3. — это этап поддержки

В Рабочей группе CSS мы разделяем первый этап, этап проектирования, ещё на 3 подэтапа:


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

Источники инноваций

Давайте посмотрим, откуда берутся идеи.

Было множество споров о том, кто должен придумывать новые возможности CSS.

Развивать имеющиеся реализации?
Ждать предложений от дизайнеров?
Или их должны предлагать эксперты W3C?
На самом деле, конечно, никаких споров не было — о чём тут спорить?. 🙂

Предложения новых возможностей идут отовсюду. И это правильно. Мы же не какая-то там компания, монополизирующая все хорошие идеи. 🙂 Хорошее проектирование новых возможностей нужно всем — и тем, кто будет ими пользоваться, и тем, кто будет их реализовывать, и тем, кто будет искать в них проблемы, перед тем, как мы начнём их внедрять.

Так что большинство CSS спецификаций представляют собой сочетание предложений из всех трех источников.

Анализ и пересмотр

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

Участвуй!

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

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

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

Приложение

Раз у нас есть ещё немного времени, я расскажу вам историю о том, как я начала этим заниматься.

Я начала в 1998 году с изучения HTML. Однажды я сидела, скучала, а рядом валялась книга Лоры Лемэй « HTML за 24 часа». Я прочитала введение, оно оказалось забавным, и я стала читать дальше. На главе 3 или 4 я уже была в состоянии создавать простейшие странички, и, так и не придумав, чем бы мне заняться, я решила сделать веб-страницу о HTML.

А было это в эпоху Netscape 4 и MS IE4. HTML4 был новинкой, CSS только начинал развиваться. Проект Mozilla был только что запущен как репозиторий кода Netscape 5. Захватывающее было время.

Ну и пока я возилась с некоторыми новыми блестящими возможностями веба, я наткнулась на ошибку в движке Netscape. Мне хотелось её исправить, и я отправила сообщение об ошибке через форму обратной связи. Я тогда подумала, что сообщение ушло в никуда, но потом вспомнила, что как-то читала в журнале статью о проекте Mozilla, так что я набрала mozilla.com в адресной строке, была перенаправлена на mozilla.org , и оказалась вот тут.

Там объяснялось, как скачать исходный код, где скачать пре-1.0_сборку ( которая была типа пред-пред-пред-альфа версией), и куда сообщать об ошибках. Я скачала сборку. Это было мучительно медленно на моем Pentium I, но ошибка была исправлена — как я позже узнала, при замене старого движка на Gecko. Он поддерживал эти новые блестящие функции, поэтому я его сохранила, и, в конце концов, нашла ещё один баг, о котором тоже доложила. И понеслось.

Я словно стала волонтёром-тестировщиком в команде вёрстки Мозиллы; я отправляла сообщения типа « мой сайт не работает в Mozilla!». Я упрощала страницу, чтобы осталась только та часть, которая не работала, прикладывала её к сообщению, описывала, в чём ошибка, объясняла, что должно происходить, и указывала в спецификации место, где это было указано. Исправьте pls.

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

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

Таким образом я и начала заниматься веб-стандартами.

Затем через два года я окончила колледж.

Я училась на гражданском строительстве и, понимая, что я слишком глубоко вовлечена в миссию Мозиллы, чтобы отпустить её, и понимая, что не отпустив её, я не смогу стать действительно хорошим инженером, я стала думать, не будет ли кто-нибудь мне за это платить. И, к моему счастью, согласился платить HP. Так я стала внештатным членом Рабочей группы CSS, и писала спецификации и тесты и случайные багфиксы для HP, Mozilla и Microsoft, пока отдел кадров Мозиллы не подсуетился и не принял-таки меня на работу.

Рубрика: Будущее здесь: HTML, CSS и не только

WEB движется вперед — это факт. Чуть ли не каждый день появляются какие-то новые элементы и свойства и нужно быть в курсе всего этого.

Плиточная раскладка на гридах с помощью auto-fit и minmax

Плиточная раскладка, вероятно, самый распространённый вид раскладки в фронтэнде. Особенно, для материалов. И свойства minmax и auto-fit, которые пришли вместе с CSS-гридами, сделали такую раскладку, как никогда, лёгкой для создания. Позвольте показать новый лёгкий способ создания адаптивной плиточной раскладкой на CSS-грид.

Создание скелета компонента в React

Одно из преимуществ одностраничных приложений (SPA) — это очень быстрый переход между страниц. К несчастью, контент в наших компонентах иногда бывает доступен только после того, как мы перешли на какую-то часть нашего приложения. Мы можем улучшить восприятие пользователем производительности приложения, разделив компонент на две части: на контейнер (который отображает скелет пока контента нет) и сам контент. Если мы отложим рендеринг контента до тех пор, пока он полностью не загрузится и отобразим скелет компонента, то мы уменьшим воспринимаемое время ожидания. Читать далее Создание скелета компонента в React

Кэширование SVG-спрайта в localStorage

Анимированная SVG-маска своими руками

Как сделать простую анимированную SVG-фигуру и использовать её как маску? Читать далее Анимированная SVG-маска своими руками

Возможно, вам не нужен jQuery

Как работает SVG ID?

Я много рассказывал о теге в SVG и использовал его для вывода иконок. Прелесть в том, что с помощью можно ссылаться на часть SVG и выводить только её. Это позволяет использовать схему «много изображений за один запрос, потому что это суперэффективно», которую раньше решали с помощью CSS-спрайтов и иконочных шрифтов. Читать далее Как работает SVG ID?

Синтаксис SVG «path»: иллюстрированное руководство

в SVG является основным способом рисования. С помощью него можно нарисовать всё что угодно! Я слышал, что на самом деле все другие элементы для рисования, в конечном счёте, используют path. Он имеет один атрибут для описания того, что рисуется: аттрибут . Его значение — это мини-синтаксис и он выглядит довольно непонятно: это длинная строка с кучей цифр и букв. Я не эксперт, но решил поковыряться в нём. Читать далее Синтаксис SVG «path»: иллюстрированное руководство

Gulp: инструкция для начинающих

Настройка сборщика для сборки Pug/Stylus, создания SVG-спрайтов и ещё чего-то там. Если интересно — читай.
Читать далее Gulp: инструкция для начинающих

Переход к «Offline first»

Создание SVG-спрайта вручную

Как создать SVG-спрайт вручную, без сборщиков, онлайн-сервисов и геморроя. Ах, да! Без регистрации и СМС. Читать далее Создание SVG-спрайта вручную

PostCSS — будущее CSS

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

Первая версия SASS была выпущена в 2007, Less в 2009, а Stylus в 2010. За это время метаязыки CSS приобрели большую популярность. Редкий проект обходится без их использования. Они позволяют быстро писать кросс-браузерный CSS, сводя к минимуму дублирование кода и автоматизируя рутинную работу.

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

  • Скорость работы. Работает в 3 раза быстрее чем libSaas написаный на C++
  • Использование будущих возможностей CSS. PostCSS распарсит и адаптирует ваш код.
  • Множество плагинов расширяют возможности PostCSS.

Один из известных постпроцессоров Autoprefixer. Он парсит CSS и добавляет вендорные префиксы с caniuse.com. И больше не надо думать какой браузер, на какое свойство использует префикс.

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

Для того, чтобы начать пользоваться PostCSS, нужно добавить его в свой любимый сборщик и указать плагины. Я использую Gulp и вот конфиг для него:

Примеры работы плагинов

postcss-color-hex-alpha

Вот пример использования синтаксиса будущего CSS уже сегодня. Нотация вида #0000ffcc будет преобразована к виду rgba();

postcss-custom-media

И еще один пример из черновика спецификации CSS. Кастомные медиазапросы.

PostCSS Mixins

PostCSS так же предлагает отличные возможности по применению миксинов. Вот простой пример:

А вот более интересный пример использования возможностей JavaScript в PostCss. Данный миксин принимает в качестве аргумента директорию с изображениями, и создает для каждого файла свой стиль. При этом называя его в соответствии с именем файла без расширения.

И в результате выполнения:

Кроме того, миксины можно удобно хранить в отдельном каталоге. Для этого в gulpfile.js необходимо прописать mixinsDir:

Теперь складываем наши миксины в каталог mixins. Название файла будет равно названию миксина.

Вот пример с clearfix:

Уже написано достаточное количество плагинов, все их можно посмотреть на сайте с удобным поиском — [http://postcss.parts/](http://postcss.parts/). Делюсь теми, которые я с интересом попробовал и теперь активно использую:

  • CssNano — Модульный минификатор для PostCss
  • CssNext — Использование возможностей будущего CSS уже сегодня
  • Rucksack — Разработка CSS с удовольствием.
  • Stylelint — Современный CSS linter

Необычные и экспериментальные CSS-селекторы для копилки веб-верстальщика

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

Веб-верстка сложна и интересна. Даже более того, она интересна зачастую именно тем, что необычна и непроста. Особенно, когда используется не просто уже устоявшийся и отработанный за многие годы набор правил, приложений и прочего, но когда каждый веб-проект предлагает поиск чего-то нового для самого веб-верстальщика. Разумеется, используя один и тот же набор свойств, селекторов CSS (а речь о них), можно вполне создавать самые разные проекты и дизайны. Но движения вперед как такового не будет. Произойдет некоторая стагнация развития собственных умений в веб-верстке и frontend разработке.

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

Стоит отметить тот факт, что часть селекторов отлично поддерживается браузерами, часть – только последними версиями их. Детальнее мы разберем это по ходу материала.

Атрибуты и контент

CSS-селекторы атрибутов удобны в случае, если у вас есть конкретные значения и элементы, часть из которых имеет эти самые значения. Обратимся к примеру выбора фруктов, дабы было проще рассмотреть особенность кода. В данном случае можно увидеть выборку элементов по чекбоксам (type=»checkbox») и применение стилей к связанным с ними меткам, которые задают свойство шрифта (жирный, курсивный) и цвет – синий. Затем меняем стиль одного из чекбоксов, присвоив ему имя chk2 и устанавливаем цвет – красный. При этом, что важно, все остальные элементы списка не изменили своего цвета и остались синими.

Кроме того, в данном примере работа велась исключительно с элементами формы, но селекторы атрибутов могут использоваться и вне форм. Также атрибут может быть самым разным, его просто нужно изначально проверить на существование, например, button[icon]. То есть, происходит поиск для всех элементов button, что имеют атрибут icon. И совершенно не имеет значения, какой именно атрибут: со значением или без. И вот как это может быть реализовано на примере разных ссылок.

Вторая и третья ссылки выделены оранжевым (желтым) цветом и имеют атрибут либо со значением, либо пустой (это не важно). Последняя розовая ссылка имеет атрибут fluffy. Здесь уже значения не важны, главное наличие для того, чтобы селектору a[fluffy] было с чем работать.

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

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

  • [attr^=val] – атрибут (attr) начинается со значением val.
  • [attr|=val] – атрибут обладает значением полностью соответствующим val или начинающимся с val- (именно с тире).
  • [attr$=val] – атрибут заканчивается значением val.
  • [attr*=val] – значение имеет место в любом месте атрибута.
  • [attr

=val] – значение атрибута представляет собой множество слов, включающее в себя одно вхождение val и разделенных пробелами.

Очередной наглядный пример реализации с помощью изображений и ссылок, списков и прочего полезного. Что здесь интересного? Во втором примере значение [attr|=val] имеет еще и тире, на которое мы обращали внимание выше, что обычно используется для сопоставления языковых значений

.Сопоставления расширений файлов выполнено с применением A[attr$=val]. Дополнительно при использовании ::after можно создать фильтр для одинаковых значений. Следующий вариант атрибута показывает, как можно вывести соответствие по домену, вне зависимости от протокола или наличия субдомена.

Что важно еще знать? Все эти атрибуты имеют одну особенность: чувствительность к регистру. Но и её можно легко обойти. Достаточно добавить i перед закрывающей квадратной скобкой, что и даст возможность отключить данную чувствительность у совпадающих значений при выборке. Кроме того, на чувствительность обращают внимание все браузеры, кроме IE и Edge.

Селекторы для пользовательского интерфейса

Для работы с пользовательским интерфейсом тоже есть свои селекторы и некоторые интересности. Мы же обратим свой взор на формы и такие всем известные псевдо-классы, как: :checked, :disabled, :enabled. При необходимости добавить стиль к списку дел воспользуемся первым вариантом и получим пример ниже.

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

Кроме того, псевдо-классы могут использоваться при выборе значений ввода. Или когда происходит этап проверки введённых данных перед отправкой формы на соответствие правилам (номер телефона имеет +7 или нет, поле e-mail правильно заполнено: с @ или без). Для этого используют обычно: :required, :invalid, :optional, :valid.

Начните вводить e-mail. Вы увидите, как поле станет зеленого цвета. Это означает, что ввод правильный. Иногда во многих иных формах правильность заполнения определяется зелеными галочками рядом с полем ввода. Думаем, вы, читатели, сталкивались с подобным на просторах интернета. Другой момент в том, что рабочий адрес электронной почты всегда является обязательным и должен быть заполнен, поэтому соответствующее поле ввода нельзя оставлять пустым. И для этого была использована цепочка псевдо-классов :required:invalid.

Есть еще два занятных псевдо-класса. Особенность их в том, что они полезны, если элемент формы может работать с атрибутами max/min и значение находится в данных пределах или нет. Речь идет об: :out-of-range и :in-range. В примере ниже диапазон находится между 10 и 20, но поле имеет значение 8. Что не является «правильным», поэтому цвет красный. Попробуйте ввести 11 – цвет станет зеленым. Также здесь есть кнопка Сброс.

Подошла очередь и к таким возможностям CSS, как :placeholder-shown, :read-write и :ready-only. Что касается первого, то его задача отфильтровать те элементы, с которыми не было взаимодействия на уровне пользователя, соответственно информациях будет в нем всегда одна и та же (не изменённая). Есть особенность у такого селектора. Он не слишком хорошо поддерживается браузерами. Последние два – позволяют выделить объекты для редактирования или для чтения, для ввода. И, разумеется, что такие элементы могут быть чем угодно, не только текстовыми блоками. Наглядный пример это и демонстрирует.

Возвращаясь к контенту

Интерфейс рассмотрели, оформление элементов и фильтров (выборку) тоже. Посмотрим еще раз на контент, поскольку все же здесь, как ни странно, есть еще некоторые любопытные возможности для использования CSS-селекторов. Начнем снова с простого будничного. Обычно разработчики используют ::first-line, ::selection, ::first-letter, и работу их можно увидеть на примере оформления и выделения текста. Если подробнее, то первый и последний варианты нужны тогда, когда их применяют для блоков текста. Если применить тот же ::first-letter ко всем блокам из множества, то каждый абзац начнется с буквицы. В данном же случае буквицей оформлена только заглавная буква первого слова первого абзаца.

Экспериментальность и будущее CSS

Но существуют и еще некоторые интересные вариации по работе с текстом с помощью «сложного программирования CSS». Эти селекторы являются экспериментальными и на данный момент не поддерживаются браузерами (никакими). Но они есть в базе developer.mozilla MDN.

::marker – производит выборку всех маркеров списка, которые обычно содержат точку или порядковый номер.
::spelling-error – представляет собой текстовый сегмент, который помечается как неправильно написанный.
::placeholder – текстовой заполнитель для элементов формы, полей. Например, когда предлагается пользователю на сайте подписаться на рассылку, а в поле e-mail уже прописан некий адрес в качестве примера. Другие примеры на MDN.

Еще существует много экспериментальных селекторов. Но их мы не будем особо рассматривать, поскольку с практической точки зрения применить-то их нельзя, поэтому интереса на данный момент они не представляют, разве что для расширения кругозора (данный материал не об этом). Например, посмотрим на :dir(). Он поддерживается только в браузерах Firefox (настольный и мобильный). Что он может? Он работает с языковыми параметрами сайта и может производить выборку текста слева направо или наоборот, то есть rtl или ltr. Пример расположения текста представлен ниже.

Если обратиться к более поддерживаемому браузерами селектору, то посмотрим на :matches() или is() (на этом моменте еще остановимся подробнее). Поддерживается он не слишком хорошо, но уже лучше, чем dir(). Например, существует очень большой список. При использовании :matches()/is() такая «простыня» может превратиться в пару строчек. Для сжатия и упрощения кода CSS – отличный вариант!

Завершение

Мы рассмотрели только часть некоторых CSS-селекторов, которые не слишком часто употребляются веб-верстальщиками и разработчиками по разным причинам. Некоторые о них не знают, некоторые – не считают нужным знать. Использовать их или нет нашим читателям – решение личное. Но стоит отметить момент, касающийся тех селекторов, которые еще не поддерживаются браузерами. Все они являются новинками, свойственные новым правилам CSS Level 4 (от 21 ноября текущего года). И если внимательнее наблюдать за развитием новых правил, то :matches() переименовали в is().

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

15 потрясающих анимированных эффектов для текста на CSS

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

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

Спасибо большое http://www.hongkiat.com и обязательно посмотрите следующее:

Эластичная анимация

Этот эффект делается с помощью CSS и SVG, как видите, что результат получился потрясающим.

Глюк с SVG

Хотите, чтобы Ваш текст на сайте имел популярный глюк аналогового телевидения? Это можно сделать с помощью CSS и SVG фильтров

Ретро логотип

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

Эффект сдвига для текста

Как будто текст разрезали острым ножом. Этот эффект сделан с помощью 70 линий на CSS.

Длинная тень для текста


Этот элегантный эффект длинной тени для текста создан только с помощью CSS, и смотрится он удивительно.

Туманный эффект для текста

Отличный туманный эффект в основном для сайтов с тёмным дизайном. Работает данный эффект только в Webkit браузерах

Маска для текста на SVG

Анимация для текста

Это на вид простая анимация, но она сделана только на CSS и стоит Вашего внимания.

3d текст

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

Текст с фоном

Вернее текст тут, как бы, получается прозрачным.

Мигающий текст

Тут мы можем видеть довольно приглушающий свет для текста, который к тому же ещё и периодически мигает.

Анимированная подпись

Это необычный эффект для текста на CSS. Подойдёт для множества сайтов, и точно может привлечь посетителей.

Глюк для страницы с 404 ошибкой

Совершенно необычный и красивый глюк, который можно установить на страницу с 404 ошибкой.

Космос

Довольно интересный и хорошо продуманный логотип с анимацией, которая работает на CSS

Загрузка

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

CSS из будущего

Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

Дизайн лендинга

Создавайте дизайн любых сайтов — для себя и на заказ!

Популярное

  • Главная
  • ->
  • Материалы
  • ->
  • 30 CSS-селекторов, о которых полезно помнить

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

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

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

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

Верстайте на заказ и получайте деньги.

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Создайте свой сайт за 3 часа и 30 минут.

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

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Хотите изучить JavaScript, но не знаете, как подступиться?

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

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

*Наведите курсор мыши для приостановки прокрутки.

30 CSS-селекторов, о которых полезно помнить

Итак, Вы разобрались с основными селекторами: id, class, селекторами потомков. И все? Если да, то Вы теряете очень много в плане гибкости управления внешним видом элементов на странице.

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

1. *

Начнем с простейших вещей для новичков, прежде чем перейдем к продвинутым селекторам.

Символ звездочки позволяет выбрать все элементы на странице. Многие веб-разработчики используют это для «обнуления» всех внешних и внутренних отступов.

Также символ * можно использовать для дочерних элементов объекта.

Этот код нацелен на все элементы, которые являются дочерними по отношению к блоку с идентификатором container.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

2. #X

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

«Спросите себя: Мне точно необходимо использовать id для какого-то элемента, чтобы сослаться на него?»

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

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

3. .X

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

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

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

4. X Y

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

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

«Совет: Если Ваш селектор похож на X Y Z A B.error, то Вы, вероятно, что-то делаете на так. Всегда спрашивайте себя, действительно ли это самый простой способ»

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

5. X

Что, если Вы хотите сослать на все элементы определенного типа на странице, если у них нет id или классов? Делайте проще, используйте селекторы типа. Если Вам нужно выбрать все неупорядоченные списки, используйте ul<>.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

6. X:visited и X:link

Здесь мы используем псевдо-класс :link для выбора всех ссылок, на которых еще не был совершен клик.

Также есть псевдо-класс :visited, который, как Вы и ожидали, позволяет нам применить стиль только к тем ссылкам, по которым был совершен клик или переход.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

7. X + Y

Это так называемый смежный селектор. В этом случае каждый параграф следующий сразу после каждого элемента ul будет красного цвета.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

8. X > Y

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

Селектор #container > ul выберет только те элементы ul, которые являются прямыми потомками блока div с идентификатором container. Т.е. в данном случае этот селектор не отберет элемент ul, который является потомком первого элемента li.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

Эта комбинация сестринских (сиблинговых) элементов похожа на X + Y, но она менее строгая. Если в случае ul + p будут выбраны только первые элементы p, следующие за ul (т.е. наблюдается смежность в выборе), то рассматриваемый нами сейчас селектор более общий.

В нашем случае он отберет все элементы p, следующие за элементом ul.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

10. X[title]

Здесь мы обращаемся к атрибуту селектора. В нашем примере будут окрашены в зеленый цвет только ссылки, имеющие атрибут title.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera


11. X[href=»foo»]

Код выше позволит придать стиль всем ссылкам, атрибут href у которых равен http://www.codeharmony.ru. Эти ссылки будут красного цвета. Остальные ссылки не получат данного стиля.

Это работает хорошо, но это немного негибко. Что, если ссылка на самом деле ведет на Codeharmony.ru но, возможно, адрес указан, как codeharmony.ru а не http://www.codeharmony.ru? В таких случаях мы можем использовать основы регулярных выражений.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

12. X[href*=»codeharmony»]

Поехали дальше; это как раз то, что нам нужно. Звездочка означает, что искомое значение может находиться в любой части атрибута href. Таким образом, мы можем отобрать и http://www.codeharmony.ru и www.codeharmony.ru и codeharmony.ru.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

13. X[href^=»http»]

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

Делается это с помощью символа ^ (карат). Он обычно используется в регулярных выражениях для обозначения начала строки. Если мы хотим отобрать ссылки, у которых атрибут href начинается с http, то мы можем использовать селектор из примера выше.

«Обратите внимание, что мы не ищем http://. Это необязательно и, к тому же, не учитывает ссылки по протоколу https://.»

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

14. X[href$=».jpg»]

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

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

15. X[data-*=»foo»]

Как же мы можем охватить различные типы картинок? Мы можем создать, например, несколько селекторов:

Но это муторно и не элегантно. Другой вариант — это создать собственный атрибут data-filetype и добавить его к каждой ссылке, ведущей на картинку.

Поступив таким образом, мы можем использовать код данного примера:

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

Вот еще один интересный трюк, о котором не все знают. Знак

(тильда) позволяет нам выбирать атрибуты со значениями, разделенными пробелами, т.е.

Используя данный прием мы можем делать выборки с нужными нам комбинациями:

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

17. X:checked

Этот псевдо-класс отбирает те элементы, которые были отмечены, например, радиокнопку или чекбокс.

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

18. X:after

Данный псевдо-класс позволяет сгенерировать контент вокруг выбранного элемента.

Данный пример показывает, как с помощью псевдо-класса :after после блока с классом .clearfix создаётся пустая строка, после чего очищается. Хороший метод, когда невозможно применить overflow: hidden.

Совместимость:

* IE8+
* Firefox
* Chrome
* Safari
* Opera

19. X:hover

Это Вы точно знаете. Официальное название звучит вроде «псевдо-класс, основанный на действии пользователя». Звучит страшновато, хотя на деле все просто. Хотите применить к элементу определенный стиль, когда на него наводится курсор мыши? Это оно самое!

«Помните, что старые версии IE не понимают этого псевдо-класса по отношению к чему-бы то ни было, кроме тэга а.»

Часто данный прием используется для задания нижней границы для ссылок при наведении на них курсора:

«Мега-чит: border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;»

Совместимость:

* IE6+ (в IE6 работает только по отношению к ссылкам)
* Firefox
* Chrome
* Safari
* Opera

20. X:not(selector)

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

Если же мне нужно выбрать все элементы, кроме тэгов параграфов, то можно написать так:

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

21. X::pseudoElement

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

Выбираем первую букву параграфа:

Этот кусок кода найдет все параграфы на странице и применит к первой букве каждого из них указанные стили. Часто это используется для создания эффекта «газетного заголовка».

Выбираем первую строку параграфа:

Аналогично предыдущему примеру, но в данном случае будет выбрана первая строка каждого параграфа.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

22. X:nth-child(n)

Помните времена, когда мы не имели возможности обратиться к конкретному порядковому элементу-потомку? Данный псевдо-класс решает эту проблему!

В качестве параметра принимается целое число. Если нужно выбрать 2-й элемент списка, нужно использовать конструкцию: li:nth-child(2).

Мы можем даже выбирать группы элементов-потомков. К примеру, чтобы выбрать каждый четвертый элемент списка, нужно использовать конструкцию: li:nth-child(4n).

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari

23. X:nth-last-child(n)

Что, если у Вас есть большой неупорядоченный список и Вам нужно, к примеру, выбрать третий элемент с конца. Вместо того, чтобы писать li:nth-child(397), Вы можете воспользоваться псевдо-классом nth-last-child.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

24. X:nth-of-type(n)

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

Представьте, что на странице есть пять неупорядоченных списков. Если Вам нужно применить стили только к третьему списку, но у него нет уникального идентификатора и иных «зацепок», то можно воспользоваться псевдо-классом nth-of-type(n). В коде выше показан способ придания стиля только третьему неупорядоченному списку.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari

25. X:nth-last-of-type(n)

Да, для полноты картины есть и такой вариант. Так можно выбрать n-ный элемент определенного типа с конца.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

26. X:first-child

Этот псевдо-класс позволяет выбрать только первого потомка родительского элемента. Часто используется для удаления границ первого и последнего элементов списка.

К примеру, если у вас есть список рядов, каждый из которых имеет border-top и border-bottom, то последний и первый элементы списка будут немного выбиваться из общего строя.

Для устранения этого недостатка можно использовать данный псевдо-класс.

Совместимость:

* IE7+
* Firefox
* Chrome

Сайт на WordPress

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress

Информационный портал по безопасности

Будущее CSS

Странное и в то же время удивительное время для CSS.

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

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

  • Препроцессоры и абстракции типа Sass, Less и PostCSS добавляют в стили программные конструкции. С их помощью мы можем представлять CSS, как настоящий turing-complete язык программирования.
  • Шаблоны типа Atomic/Functional/Utility делают селекторы более простыми и откатывают нас назад к презентационной схеме именования.
  • Архитектуры типа ITCSS помогают организовывать наш код и файлы в упорядоченные понятным и предсказуемым образом логические части, что позволяет легко находить нужный участок кода, а также помогает выбрать подходящее место для нового кода.
  • Фреймворки типа True и Sassaby проводят модульные тесты абстрактного CSS кода.

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

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

Одним из самых облегчающих жизнь событий в современной front-end разработке стал переход к компонентной архитектуре – т.е. код, в котором разметка, представление и логика структурно и/или функционально объединены. Компонентную архитектуру мы видели в крайне популярном фреймворке React и в набирающих известность веб-компонентах (а также в фреймворках на основе веб-компонентов типа Polymer). Другие основные игроки среди JS фреймворков, такие как Ember и Angular уловили важность данного перехода и также включили различные вариации данной концепции в библиотеки.

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

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

Нельзя преуменьшать важность данных преимуществ. Если вы, вдруг, начали сомневаться в важности вышеупомянутой архитектуры и ее преимуществ, вспомните ваш кривой проект на Angular 1.x. Вспомните, как вы пробирались через лабиринт HTML атрибутов, контроллеров и директив, названий файлов (часто эти имена совсем не передавали смысла контроллеров и директив), зависимостей модулей… На секунду закройте глаза и представьте, как может выглядеть граф зависимостей такого приложения. Я бы предположил, что «Самый большой в мире моток шпагата» довольно подходящее название для такого графа.

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

Прогрессивные фреймворки и библиотеки «оседлали волну», используя вышеупомянутые шаблоны: Atomic/Functional/Utility стали популярны за последний год или два. Примером могут послужить фреймворки Tachyons, BassCSS, а также мой фреймворк Nuclide.

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

Теперь, когда вы привыкли к такому большому количеству классов в HTML, давайте рассмотрим плюсы этого конкретного подхода:

  • Высокая декларативность HTML кода позволяет нам представить, как выглядит элемент без необходимости заглядывать в стили
  • С плоским списком классов можно забыть о проблемах со специфичностью и переопределением стилей
  • Устранение контекстных CSS селекторов позволяет правильно спланировать и выстроить нашу архитектуру таким образом, чтобы она следовала лучшим современным практикам: модульность, повторное использование и производительность
  • Если использовать данный подход на большинстве элементов веб-страницы, можно существенно сократить объем стилей для всего сайта – останутся только наши модульные классы от фреймворка Atomic, которые можно повторно использовать (плюс одноразовые классы, которые часто пишутся для конкретных проектов)

Неплохие такие преимущества, правда?!

Но не все так гладко. Теперь взглянем на минусы:

  • Адаптивный дизайн не так хорошо работает с данной моделью. Фреймворк Tachyons использует классы из дополнительного пространства имен для индикации классов медиа запросов – а это означает, что нам нужно продублировать ВСЕ классы фреймворка Atomic для каждого разрешения экрана. Кроме того, возникает когнитивная перегрузка из-за того, что в нашей базе классы техники mobile-first перемешиваются с классами медиа запросов; представьте себе, что вам нужно написать код конкретного компонента для трех или более разрешений экрана с большим количеством изменений в стилях
  • Данная модель не охватывает псевдоклассы. Как же тогда реализовывать состояния hover или active?
  • Данная модель не охватывает псевдоэлементы. Как тогда стилизовать элементы :before или :after?

В принципе, мы почти закончили. Но можно и лучше.

Давайте доведем эту концепцию до логического конца.

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

Наш фреймворк должен соответствовать следующим критериям:

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

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


Нам понадобится: JS библиотека, способная добавить к стандартным HTML атрибутам новый набор атрибутов, которые для достижения поставленных нами задач будут работать в паре с CSS классами Atomic. В основе библиотеки должна лежать адаптивная техника mobile-first. Библиотека будет применять стандартные возможности HTML на устаревших браузерах.

Пример HTML кода:

Объясним, что тут происходит: по умолчанию атрибут class будет использоваться для стилей техники mobile-first. Затем по событию полной загрузки страницы и/или изменению ее размера наша библиотека (fxCSS или «futureCSS») подтянет пользовательские атрибуты и применит соответствующие изменения к определенному устройству. В этом примере библиотека fxCSS с помощью атрибутов -remove и –add заменяет класс «p-sm» на «p-md». Поднимаясь до разрешений настольных компьютеров, мы заменяем все классы списком классов для настольного компьютера (для данного функционала отсутствуют директивы -remove/-add). И последнее, у нас есть отдельный атрибут для стилей псевдоклассов наподобие hover.

Для работы всего функционала нам потребуется подключить JS, а значит, сейчас произойдет что-то очень серьезное: если сделать HTML код на 100% декларативным и определить все 100% CSS классов, которые мы будем использовать, мы сможем сделать кое-что по-настоящему необычное:

  • Можно уменьшить CSS библиотеку под конкретный проект и оставить только широко используемый фреймворк с набором настроек (где заданы единицы измерения расстояний (padding/margin/width/height), шрифты, цвета и т.д.), который выкидывает все вспомогательные классы, которые нам могли бы пригодиться
  • Можно реализовать функцию внутри библиотеки fxCSS, которая в качестве входных данных принимала бы HTML шаблоны, составляла бы полный список используемых в шаблонах классов и удаляла бы неиспользуемые. Это кардинально бы уменьшило размер CSS файла (в файле не было бы медиа запросов, так как функционал по применению стилей в зависимости от устройства лежит на JS библиотеке. Эту функцию можно включить или отключить.)
  • Можно написать тест, который будет проверять наличие у заданного элемента нужного класса. Также с помощью теста можно проверять, добавлены ли или удалены классы к нужному устройству. Концепцию тестов можно развить еще сильнее – так как наши классы независимы и подчиняются заданной схеме именования, можно реализовать проверки типа: если дочернему элементу присвоен класс «fl-l» (float: left), можно проверить, чтобы у родительского элемента был класс «cf» (clearfix)
  • Можно создать репозиторий HTML-фрагментов компонентов интерфейса – так как ядро CSS библиотеки, ее именования и генерируемые классы стали (теоретически) широко используемыми стандартами, для создания компонентов нам понадобится только HTML: при необходимости код на 100% декларативный и легкоизменяемый. 20 дизайнеров интерфейсов могут создать 20 разных вариантов компонента меню, а так как все они используют одни и те же базовые CSS классы, для просмотра каждого варианта необходимо просто скопировать и вставить правильный HTML код

    Не стоит забывать про:

    • Производительность: Учитывая, что новые атрибуты фактически будут применяться ко всем элементам на странице, может наблюдаться значительное падение производительности. Существует потенциальный компромисс – к примеру, во время принудительных трансформаций с помощью библиотеки fxCSS можно проверять видимую область веб-страницы на устройстве и применять стили только к этой части, и только потом при прокрутке пользователем страницы вверх или вниз применять стили к остальным частям
    • Псевдоэлементы все еще не работают – проблему можно решить с помощью дополнительного пользовательского атрибута
    • Есть ли еще какие-либо уступки, на которые нам придется пойти ради старых браузеров? Можем ли мы столкнуться с проблемами с CSS в Internet Explorer?
    • Можно попасть в оценку 80/20 для конфигурации CSS по умолчанию, что позволит разместить его на CDN и сделает написание/правку CSS более эффективной?

    Прежде всего, становится ясно, что сам способ мышления о CSS резко меняется. Front-end разработчики понимают, что переписывать одни и те же 50 свойств до посинения не продуктивно. Кроме того, переход к компонентной архитектуре заставляет нас переосмыслить процесс создания стилей для браузера. HTML и CSS – отличная пара. Так почему бы их не связать вместе?

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

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

    Так вот, хотел узнать, будет ли Вам интересно, если мы самое свежее и, на наш взгляд, интересное из англоязычного интернета будем публиковать на хабре. Если Вы «За», то дайте знать в комментариях.

    Очередной блог фрилансера

    коротко и полезно о веб-разработке

    HTML 5 и CSS3: Техники, которые мы скоро будем использовать

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

    Что мы собираемся создавать

    Вот так будет выглядеть наша страница, когда мы закончим:

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

    HTML 5

    HTML 5 является следующей версией HTML. Он включает в себя множество новых элементов, которые сделают наши страницы более семантическими. Это значительно облегчит навигацию по странице для поисковых систем и голосовых модулей. Кроме того, HTML 5 также будет включать API для рисования графиков на экране, хранения данных на клиенте, технологию drag-and-drop, и многое другое. Давайте начнем разметку для нашего блога.

    Основная структура

    Прежде чем мы создадим разметку страницы, нужно представить общую структуру:

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

    Это выглядит как обычная HTML-разметка, но есть несколько моментов, которые стоит отметить:

    • В HTML 5, есть только один doctype . Он объявляется в начале страницы через . Он просто сообщает браузеру, как интерпретировать HTML-документ.
    • Новый тэг header , является контейнером для вступительных элементов, таких как заголовок или логотип. Он также может содержать оглавление или поисковую форму. Каждый заголовок обычно содержит теги заголовков от

    . В данном случае заголовок используется только для представления страницы, немного позднее мы добавим его в различные секции страницы.
  • Тэг nav используется для содержания навигационных элементов, таких как основная навигация сайта или более специализированная навигация, как ссылки на следующую/предыдущую страницы.
  • aside – используется для обертывания содержимого, связанного с основным контентом страницы, которое всегда находится на одном месте. В данном случае мы используем его для сайдбара.
  • Тэг section используется для обозначения секции документа. Он может содержать все виды разметки, и множество секций могут быть вложены друг в друга.
  • Тэг footer должен содержать дополнительную информацию об основном контенте, такую как информацию об авторе, копирайты, ссылки на похожие документы и тому подобное.
  • Вместо того чтобы использовать тэг

    Разметка для Навигации

    Разметка навигации создается точно так же как и в HTML 4 или XHTML, с использованием маркированного списка. Ключ в том, что этот список располагается внутри тэгов nav .

    Разметка для Вступления

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

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

    Разметка Основного контента

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

    Разметка для Записи

    Посмотрите разметку, и я расскажу о новых элементах ниже.

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

    Элемент header , используется для представления заголовка и метаданных о записи. Мы сообщаем пользователю, когда статья была написана, кто ее написал, и как много комментариев она имеет. Обратите внимание, что время заключено в соответствующий тэг. Этот тег также новый в HTML 5, и используется для разметки определенного участка во времени. Содержимое атрибута datetime должно быть следующим:

    Год, затем тире (знак минус)

    1. Месяц, затем тире
    2. Дата
    3. Прописная T, для определения того, что мы собираемся указывать местное время
    4. Местное время в формате hh:mm:ss
    5. Часовой пояс по Гринвичу. Я нахожусь в Дании, где GMT+1, поэтому я пишу +01.

    Разметка для Комментариев

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

    Разметка для Формы Комментирования

    В HTML 5 был представлен ряд усовершенствования для форм. Вам больше не нужно заботиться о валидации необходимых полей на клиентской стороне. Браузер все сделает за вас.

    Появилось два новых типа input-ов, email и url . Email указывает на то, что пользователь должен ввести валидный E-mail, а в поле url — валидный адрес сайта. Если вы добавите атрибут required , пользователь не сможет отправить пустое поле. «Required» — это логический атрибут, новый в HTML 5. Это всего лишь значит, что поле обязательно должно иметь какое-то значение.

    Разметка Сайдбара и Подвала

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

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

    Стилизация с CSS 3

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

    Основные настройки

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

    Сначала мы, простым правилом, обнуляем значения свойств margin — и padding -.

    Затем, мы указываем браузеру, возвращать все новые элементы HTML 5 в качестве блоков. Браузеры нормально относятся к неизвестным элементам, но им неизвестно как эти элементы должны быть отрисованы по умолчанию. Нам придется сообщать об этом браузерам до тех пор, пока HTML 5 официально не будет утвержден.

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

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

    Стилизация Навигации

    Обязательно обратите внимание, что ширина у body задана 940 px , и он располагается по центру. Нашему блоку навигации нужно растянуться по всей доступной ширине окна, так что мы должны применить необходимые для этого стили:

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

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

    Стилизация Предисловия

    Разметка для предисловия очень простая. Секция с заголовком и абзацем текста. Тем не менее, мы будем использовать немного новых CSS 3-свойств, чтобы сделать ее более привлекательной.

    Мы использовали два новых свойства. Первое, это background — size , которое позволит вам масштабировать фоновое изображение. В нашем случае, мы будем масштабировать его на 100% по обеим осям. Если при добавлении контента, бокс растянется, то лежащий в фоне градиент будет масштабироваться вместе с боксом. Это как раз то, что нельзя реализовать в CSS 2.1 не нарушая семантики разметки.

    Второе новое свойство это – border — radius , которое применяет закругленные углы к элементу. Радиус наших закругленных углов равен 22 px , для каждого угла. Вы можете назначить различные значения для любого угла, или назначить закругленными только определенные углы.

    К сожалению, ни одно из этих свойств, полностью не поддерживается в популярных браузерах. Тем не менее, мы можем получить некоторую поддержку, используя специфические расширения для браузеров. Background — size поддерживается в последней версии Safari , Opera и Konqueror . Border — radius поддерживается в последней версии Safari и Firefox .

    После того как мы указали свойство background — color , можно не боятся проблем с отображением страницы в браузерах, не поддерживающих background — size , таких как Firefox . Теперь нам нужно стилизовать заголовок и текст.

    Картинку цветка можно легко поместить на страницу, путем добавления второго фонового изображения, то, что поддерживается в CSS 3, для секции # intro .

    Мы назначили два фоновых изображения, измерив напоследок, чтобы убедиться, что они не перекрывают друг друга. Обратите внимание на короткую запись свойства background-size .

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

    Стилизация Контента и Сайдбара

    Контент и сайдбар должны быть расположены рядом друг с другом. Обычно это делается с помощью float , но в CSS 3 это можно сделать с помощью таблиц!

    «Что?! Таблицы?», наверное, удивитесь вы. Потому что давным-давно знаете, что использование таблиц для создания раскладки очень и очень плохая идея, и это до сих пор так. Вы никогда не должны использовать элементы таблицы для верстки раскладки. Однако, с помощью CSS 3, мы можем сделать элементы похожими на таблицы, без появления таблиц в разметке. Для начала, нам потребуется немного элементов div , чтобы сгруппировать секции, более логичным образом.

    Вся разметка остается семантической, но теперь мы можем ее стилизовать. Нам нужно сделать блок #content похожим на таблицу, с колонками из блоков #mainContent и aside . С CSS 3 это очень легко:

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

    Стилизация Записи

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

    Множественные колонки

    Множественные колонки текста раньше невозможно было создать без ручного разделения текста, но с CSS 3 это очень просто, все, что нам понадобится это завернуть параграфы в элемент div , для работы с текущими браузерами.

    Теперь мы можем добавить два простых свойства.

    Нам нужно создать 2 колонки с расстоянием 22 px между ними. Дополнительный div нужен, потому что на данный момент нет поддерживаемого способа выстраивания элементов в несколько колонок. В будущем, возможно, вам будет достаточно указать свойство column — span , и написать всего лишь:

    Конечно, свойства column — count и column — gap поддерживаются только некоторыми браузерами, Safari и Firefox . Нам, пока что, придется использовать специальные расширения браузеров.

    Box-shadow

    Если вы внимательно взгляните на картинку статьи, вы увидите тень. Мы можем сгенерировать ее используя CSS 3 и свойство box — shadow .

    Первые «3 px » сообщают браузеру, где мы хотим расположить тень по горизонтали. Вторые «3 px », сообщают, где мы хоти расположить тень по вертикали. Последние «7 px », как должна быть размыта рамка. Если вы установите последнее значение в ноль, рамка будет сплошной. Последнее, но не по значению, указывается основной цвет тени. Этот цвет конечно тускнеет, в зависимости от того насколько большое размытие тени вы установили.

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

    Полосатые Комментарии

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

    Таинственное значение «2 n +1», на самом деле очень простое, если вы понимаете что это значит:

    2 n – выбор каждого второго элемента списка. Если вы напишете 3 n , будет выбран каждый третий элемент, 4 n – четвертый, и так далее.

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

    В качестве альтернативы, вы можете написать просто:

    Здесь используется один из наиболее часто используемых стандартных значений, odd и even . Стилизация остальной части комментариев довольно проста для понимания, с вашими новыми знаниями.

    Стилизация Формы отправки комментариев, Подвала и Сайдбара

    Для стилизации подвала сайдбара и формы комментариев, была использована пара CSS 3-техник. В форме комментариев и в подвале, я использовал ту же технику табличной раскладки, что и в основном макете. В сайдбаре использовался border — radius , для добавления закругленных углов различным секциям.

    Финальный Дизайн

    Смотрите результат нашей работы, со всеми стилями.

    Заключение

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

    Рассказать друзьям

    Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

    «Письмо из будущего» — техника, которая поможет дать отпор своим страхам

    Решиться на то, чего мы никогда не делали, очень трудно. Всему виной страх неизвестности. Быть уверенным в своих действиях приятно и придает смелости. Но все мы боимся совершить ошибку и испортить отношения с окружающими и даже свою жизнь. Однако, если обратить внимание на ход истории, многие шли наперекор своим страхам и совершали такие прорывы в науке, которые позволили нам жить в удобстве сегодня. Братья Райт тоже были не уверены в том, что можно летать. Страхи продолжают расти, когда мы их игнорируем. И чем дольше мы избегаем момента Х, тем труднее нам сделать шаг вперед. Мы предлагаем вам технику «Письмо из будущего», которая поможет вам наконец-то пересилить себя и дать отпор своим страхам.

    Как подготовиться и написать письмо из будущего? Вот подробная инструкция.

    — На листе бумаги напишите свое имя.

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

    — Проанализируйте, насколько много усилий вам для этого потребуется. Распишите плюсы и минусы вашей работы, а также представьте, как это будет происходить: где вы будете этим заниматься и с кем, что вас будет окружать, что вы будете чувствовать. Тогда, когда у вас перед глазами появится реальная картина с четкими деталями, напишите себе настоящему письмо из будущего. Помните, что отправитель — это вы в том будущем, в котором вы уже решились побороть страхи. Опишите свои чувства и насколько вы довольны результатом. Что бы вы хотели изменить?

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

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

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

    Поделитесь постом с друзьями!

    Топ-пост этого месяца:  Как получить естественные бесплатные внешние ссылки на сайт
    Добавить комментарий