dpcm в CSS


Содержание

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 534053becf1f8f73 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

CSS: Правило @media

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

Синтаксис

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

Типы устройств

Тип Описание
all Используется для всех типов устройств.
aural Используется для синтезаторов речи и звука.
braille Используется для тактильной обратной связи устройств Брайля.
embossed Используется для принтеров Брайля.
handheld Используется для небольших или портативных устройств.
print Используется для принтеров
projection Используется для презентаций, таких как слайды.
screen Используется для экранов компьютеров, планшетов, смартфонов и т.д.
speech Используется для речевых браузеров.
tty Используется для носителей, использующих сетки с фиксированным шагом символов, такие как телетайпы и терминалы.
tv Используется для телеэкранов.

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

Особенности устройств для медиа запросов

Особенность Описание
aspect-ratio Определяет соотношение ширины и высоты области просмотра. Значение состоит из двух положительных чисел, разделенных прямой косой чертой (слэшем). Первое число представляет собой количество пикселей по горизонтали, второе по вертикали. Может иметь префикс «min» или «max».
color Определяет количество бит на цвет для устройства. Может иметь префикс «min» или «max».
color-index Указывает количество цветов, которое устройство может отображать. Может иметь префикс «min» или «max».
device-aspect-ratio Определяет соотношение ширины и высоты устройства вывода. Значение состоит из двух положительных чисел, разделенных прямой косой чертой (слэшем). Первое число представляет собой количество пикселей по горизонтали, второе по вертикали. Может иметь префикс «min» или «max».
device-height Указывает высоту устройства, такого как экран компьютера (имеется в виду весь экран или страницу, а не только область просмотра). Может иметь префикс «min» или «max».
device-width Указывает ширину устройства, такого как экран компьютера (имеется в виду весь экран или страницу, а не только область просмотра). Может иметь префикс «min» или «max».
grid Определяет как устроен вывод у устройства: на основе сетки или точечный. Если устройство на основе сетки (например, терминал, телетайп или дисплей телефона, поддерживающий только один шрифт), то значение 1, в противном случае значением будет 0.
height Указывает высоту области просмотра, например, окно браузера. Может иметь префикс «min» или «max».
monochrome Указывает количесвто бит на пиксель для устройств с монохромными экранами. Может иметь префикс «min» или «max».
orientation Указывает в каком режиме просмотра находится дисплей: ландшафтном (ширина дисплея больше, чем высота) или портретном (высота дисплея больше, чем ширина).
resolution Указывает разрешение (плотность пикселей) устройства вывода. Может быть указана в dpi (точек на дюйм) или в dpcm (точек на сантиметр). Может иметь префикс «min» или «max».
scan Определяет процесс сканирования телевизионных устройств вывода.
width Указывает ширину области просмотра, например, окно браузера. Может иметь префикс «min» или «max».

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

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

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

Этот медиа запрос имеет значение true, если устройство для просмотра имеет максимальное разрешение области просмотра 500px и соотношение сторон 1:1 (квадрат или ландшафтный просмотр). Обратите внимание, что в этом запросе нет типа устройства, поэтому это правило будет применяться ко всем типам устройств.

Логические операторы

В дополнение к логическому оператору and (и), медиа запросы могут включать в себя логическое not (не), only (только) и or (или). Запятая (,) используется в качестве оператора or, то есть каждый запрос рассматривается индивидуально. Это означает, что с помощью запросов, разделенных запятой, можно одно правило @media ориентировать на различные типы устройств и их особенности.

Следующее правило @media применяется либо к устройству с минимальной областью просмотра 700px в ширину, либо если устройство находится в ландшафтном режиме просмотра:

Оператор not используется для отрицания условий медиа запроса. Соответствующие стили применяются, если устройство не соответствует указанным вслед за not параметрам. Например следующее правило применяется только в том случае, если экран устройства не 800px в ширину:

Оператор only применяется, когда нужно скрыть правило @media от старых браузеров, которые не поддерживают описываемый синтаксис. Браузеры, которые поддерживают медиа запросы, оператор only просто проигнорируют.

CSS @media Rule

Example

Change the background color of the element to «lightblue» when the browser window is 600px wide or less:

More «Try it Yourself» examples below.

Definition and Usage

The @media rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

  • width and height of the viewport
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution

Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.

You can also use media queries to specify that certain styles are only for printed documents or for screen readers (mediatype: print, screen, or speech).

In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.

Browser Support

The numbers in the table specifies the first browser version that fully supports the @media rule.

Property
@media 21 9 3.5 4.0 9

CSS Syntax

meaning of the not, only and and keywords:

not: The not keyword reverts the meaning of an entire media query.

only: The only keyword prevents older browsers that do not support media queries with media features from applying the specified styles. It has no effect on modern browsers.

and: The and keyword combines a media feature with a media type or other media features.

They are all optional. However, if you use not or only, you must also specify a media type.

You can also have different stylesheets for different media, like this:

Media Types

Value Description
all Default. Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that «reads» the page out loud

Media Features

Value Description
any-hover Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
any-pointer Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
aspect-ratio The ratio between the width and the height of the viewport
color The number of bits per color component for the output device
color-gamut The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4)
color-index The number of colors the device can display
grid Whether the device is a grid or bitmap
height The viewport height
hover Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
inverted-colors Is the browser or underlying OS inverting colors? (added in Media Queries Level 4)
light-level Current ambient light level (added in Media Queries Level 4)
max-aspect-ratio The maximum ratio between the width and the height of the display area
max-color The maximum number of bits per color component for the output device
max-color-index The maximum number of colors the device can display
max-height The maximum height of the display area, such as a browser window
max-monochrome The maximum number of bits per «color» on a monochrome (greyscale) device
max-resolution The maximum resolution of the device, using dpi or dpcm
max-width The maximum width of the display area, such as a browser window
min-aspect-ratio The minimum ratio between the width and the height of the display area
min-color The minimum number of bits per color component for the output device
min-color-index The minimum number of colors the device can display
min-height The minimum height of the display area, such as a browser window
min-monochrome The minimum number of bits per «color» on a monochrome (greyscale) device
min-resolution The minimum resolution of the device, using dpi or dpcm
min-width The minimum width of the display area, such as a browser window
monochrome The number of bits per «color» on a monochrome (greyscale) device
orientation The orientation of the viewport (landscape or portrait mode)
overflow-block How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4)
overflow-inline Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4)
pointer Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
resolution The resolution of the output device, using dpi or dpcm
scan The scanning process of the output device
scripting Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4)
update How quickly can the output device modify the appearance of the content (added in Media Queries Level 4)
width The viewport width

More Examples

Example

Hide an element when the browser’s width is 600px wide or less:

Example

Use mediaqueries to set the background-color to lavender if the viewport is 800 pixels wide or wider, to lightgreen if the viewport is between 400 and 799 pixels wide. If the viewport is smaller than 400 pixels, the background-color is lightblue:

body <
background-color: lightblue;
>

@media screen and (min-width: 400px) <
body <
background-color: lightgreen;
>
>

@media screen and (min-width: 800px) <
body <
background-color: lavender;
>
>

Example

Create a responsive navigation menu (displayed horizontally on large screens and vertically on small screens):

Example

Use media queries to create a responsive column layout:

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) <
.column <
width: 50%;
>
>

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) <
.column <
width: 100%;
>
>

Example

Use media queries to create a responsive website:

Example

Media queries can also be used to change layout of a page depending on the orientation of the browser. You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called «Landscape» orientation.

Use a lightblue background color if the orientation is in landscape mode:

Example

Use mediaqueries to set the text color to green when the document is displayed on the screen, and to black when it is printed:

Example

Comma separated list: add an additional media query to an already existing one, using a comma (this will behave like an OR operator):

Dpcm в CSS

Многослойная система организации CSS основана на принципах OOCSS и БЭМ. Методология родилась и развивается в команде разработчиков OK.ru и рекомендуется к использованию как основа для собственного свода правил и документаций.

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

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

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

Всегда будем рады ответить на ваши вопросы в разделе Issues на Github или в комментариях на страницах сайта проекта.

Быстрая навигация

Основные правила

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

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

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

Нулевой слой, или фундамент

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

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

Компоновка модулей

Порядок подключения стилей

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

Первый слой — базовый

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

  • формы
  • кнопки
  • блоки навигации и пр.
  • и другие

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

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

Как часть первого слоя можно смело использовать такие популярные фреймворки, как Bootstrap, 960gs, inuit.css и пр.

Правила

Основное правило первого слоя — абстрактность как в названиях, так и в разметке:

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

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

Ядро (1-й слой) должно быть абстрагировано от модулей 2ого слоя, пример:

Взаимодействия стандарта форм со стандартом кнопок — модифицирование каскадом от 1-го слоя:

Взаимодействие проектного модуля со стандартом во 2-м слое:

Модификация 2-го слоя, от 1-го запрещена! В такой ситуации слои смешиваются, вызывая беспорядок:

Базовые стили подключаются сразу после фундамента, перед 2-м слоем, для поддержания низкого уровня приоритета по весу селекторов.

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

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

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

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

Второй слой — проектный

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

  • форма регистрации
  • блок логина
  • корзина товаров
  • и другие

Правила

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

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

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

В примере описан модуль второго слоя .toolbar, который использует стандарт первого слоя .umenu. Чтобы модифицированиевать стандарт под проектные нужды, используется каскад в CSS:

Стили второго слоя могут быть модифицированы каскадом только от других модулей этого слоя.

Можно:

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

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

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

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

Третий слой — косметический

Третий слой состоит из простых, мало влияющих стилей:

  • цвета ссылок
  • Простые OOCSS селекторы — пара свойств на класс (.font-size_XL, .margin-t_L)
  • глобальные модификаторы

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

Правила

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

Позволяется использовать простые OOCSS-классы, не больше трёх на блок, для редких, не проектных ситуаций:

Стили косметического слоя нельзя модифицировать каскадом от других слоёв, кроме контекста.

Косметические стили подключаются в самом конце, так же допускается использование !important.

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

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

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

Контекст

Слой включает в себя стили высшего контекста и @media-правила, которые могут использоваться для изменения стандартных стилей под особенности различного контекста:

  • .ie8, .ie9 — браузеры
  • .touch — особенности устройства
  • .logged-in — высший контекст в рамках веб сайта
  • Media queries

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

Примеры использования

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

Во втором примере, изображено взаимодействие MCSS с Bootstrap, в качестве первого (базового) слоя.

Сайт проекта тоже сверстан по методологии MCSS, не стесняйтесь заглянуть в исходники.

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

Рекомендации

Code style

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

СSS3 Правило @media

Пример

Изменить цвет фона элемента на «lightblue», когда окно браузера будет иметь ширину 600 пикселей или меньше:

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

Правило @media используется в запросах мультимедиа для применения различных стилей для различных типов носителей/устройств.

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


  • ширина и высота окна просмотра
  • ширина и высота устройства
  • ориентация (планшет/телефон находится в альбомном или портретном режиме?)
  • разрешение

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

Вы также можете использовать запросы мультимедиа, чтобы указать, что определенные стили предназначены только для печатных документов или для чтения с экрана (тип носителя: print, screen, или speech).

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

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает правило @media.

Свойство
@media 21 9 3.5 4.0 9

CSS Синтаксис

значение слова not, only и and ключевое слово:

not: Ключевое слово not возвращает значение всего запроса мультимедиа.

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

and: Ключевое слово and объединяет функцию мультимедиа с типом мультимедиа или другими функциями мультимедиа.

Все они являются необязательными. Однако, если вы используете not или only, также необходимо указать тип носителя.

Вы также можете иметь разные stylesheets для различных мультимедиа носителей, как это:

Media Types

Значение Описание
all По умолчанию. Используется для всех устройств типа носитель
print Используется для принтеров
screen Использованный для экранов компьютера, планшетов, смарт-телефонов и т.д.
speech Используется для чтения с экрана, который «читает» страницу вслух

Мультимедийные возможности

Значение Описание
any-hover Позволяет ли какой-либо доступный механизм ввода пользователю наводить курсор на элементы? (добавлено в Медиа запросы Уровень 4)
any-pointer Является ли какой-либо доступный механизм ввода указательным устройством, и если да, то насколько он точен? (добавлено в Медиа запросы Уровень 4)
aspect-ratio Соотношение между шириной и высотой окна просмотра
color Количество бит на цветовой компонент для устройства вывода
color-gamut Приблизительный диапазон цветов, поддерживаемых агентом пользователя и устройством вывода (добавлено в Медиа запросы Уровень 4)
color-index Количество цветов, которые может отображать устройство
grid Является ли устройство сеткой или растровым изображением
height Высота области просмотра
hover Позволяет ли основной механизм ввода пользователю наводить курсор на элементы? (добавлено в Медиа запросы Уровень 4)
inverted-colors Является ли браузер или базовая ОС инвертирующими цветами? (добавлено в Медиа запросы Уровень 4)
light-level Текущий уровень рассеянного света (добавлен в Медиа запросы Уровень 4)
max-aspect-ratio Максимальное соотношение между шириной и высотой экрана
max-color Максимальное количество бит на цветовой компонент для устройства вывода
max-color-index Максимальное количество цветов, которое может отображать устройство
max-height Максимальная высота области отображения, например окна браузера
max-monochrome Максимальное количество бит на «color» на monochrome (в оттенках серого) устройстве
max-resolution Максимальное разрешение устройства, используя dpi или dpcm
max-width Максимальная ширина области отображения, например окна браузера
min-aspect-ratio Минимальное соотношение между шириной и высотой области отображения
min-color Минимальное количество бит на цветовой компонент для устройства вывода
min-color-index Минимальное количество цветов, которое может отображать устройство
min-height Минимальная высота области отображения, например окна браузера
min-monochrome Минимальное количество бит на «color» на monochrome (в оттенках серого) устройстве
min-resolution Минимальное разрешение устройства, используя dpi или dpcm
min-width Минимальная ширина области отображения, например окна браузера
monochrome Количество бит на «цвет» на монохромном (в оттенках серого) устройстве
orientation ориентация области просмотра экрана (альбомный или книжный режим)
overflow-block Как устройство вывода обрабатывает содержимое, которое переполняет область просмотра экрана вдоль оси блока (добавлен в Медиа запросы Уровень 4)
overflow-inline Можно ли прокручивать содержимое, которое переполняет область просмотра экрана вдоль встроенной оси (добавлен в Медиа запросы Уровень 4)
pointer Является ли основной входной механизм указательным устройством, и если да, то насколько он точен? (добавлен в Медиа запросы Уровень 4)
resolution Разрешение устройства вывода, используя dpi или dpcm
scan Процесс сканирования выходного устройства
scripting Доступен ли сценарий (например, JavaScript)? (добавлен в Медиа запросы Уровень 4)
update Как быстро устройство вывода может изменить внешний вид содержимого (добавлен в Медиа запросы Уровень 4)
width Ширина области просмотра экрана

Примеры

Пример

Скрыть элемент, если ширина браузера составляет 600 пикселей в ширину или меньше:

Пример

Использовать запросы мультимедиа, чтобы установить цвет фона в лавандовый, если видовой экран имеет ширину 800 пикселей или шире, в светло-зеленый, если видовой экран имеет ширину от 400 до 799 пикселей. Если видовой экран меньше 400 пикселей, цвет фона будет светло-синим:

body <
background-color: lightblue;
>

@media screen and (min-width: 400px) <
body <
background-color: lightgreen;
>
>

@media screen and (min-width: 800px) <
body <
background-color: lavender;
>
>

Пример

Создать адаптивное меню навигации (отображается горизонтально на больших экранах и вертикально на маленьких экранах):

Пример

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

/* На экранах шириной 992px или меньше перейти от четырех столбцов к двум столбцам */
@media screen and (max-width: 992px) <
.column <
width: 50%;
>
>

/* На экранах шириной 600 пикселей или меньше сделать столбцы стеком на вершине друг друга, а не рядом друг с другом */
@media screen and (max-width: 600px) <
.column <
width: 100%;
>
>

Пример

Использовать медиа-запросы для создания адаптивного веб-сайта:

Пример

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

Использовать светло-синий цвет фона, если ориентация находится в альбомном режиме:

Пример

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

Пример

Список, разделенный запятыми: добавить дополнительный медиа-запрос к уже существующему, используя запятую (это будет вести себя как оператор OR):

Правильный CSS: OOCSS, SMACSS, BEM и SASS

Перепечатал тут статью, которая канула в Лету.

Многие девелоперы, даже имея за плечами не один успешно выполненный коммерческий проект не оставляют поиски наилучшего способа организации стилей в макете. И большинство из них остановились на синтезе OOCSS, SMACSS, BEM и SASS. В этой статье мы не только поговорим о том, что из себя представляет правильный CSS: союз OOCSS, SMACSS, BEM и SASS, но и рассмотрим наиболее эффективную структуру организации файлов в макете.

Для начала вспомним, что из себя представляет каждая из трех методологий объектно-ориентированного CSS.

OOCSS + SCSS

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

Клон объекта через новый класс расширяется дополнительными стилями (дизайном). Таким образом, в html документе к одному блоку присваивается сразу несколько классов. Нанизывание классов характерно для многих фреймворков, например Bootstrap.

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

На помощь приходит SASS, а именно директивы
@include и @extend. С их помощью к любому блоку можно присоединять дополнительные стили минуя html.

С помощью строки

мы расширяем классы blue и red стилями из класса button:.

При компиляции SCSS мы получаем такую запись в CSS:

Это полностью совпадает с принципами OOCSS, которые настоятельно рекомендует соблюдать его создатель Jonathan Snook. НО! Стили для класса button также записываются в CSS. И в данном случае совершенно напрасно, они нам не нужны. Так очень часто бывает в макете, когда базовый дизайн не применяется.

В таком случае лучше воспользоваться директивой Placeholder Selectors (%). Placeholder записывается в CSS ТОЛЬКО! когда его вызовут:

Однако в таком случае в скомпилированном CSS одни и те же стили будут повторяться в каждом классе.

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

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

SASS позволяет избежать лишних классов в макете благодаря вложенности. Однако иногда вложенность играет с нами злую шутку и к блоку применяется большое наследование, типа

И здесь пришло время обратиться к методологии BEM, разработанной компанией Yandex. Она определяет принцип создания имен классов для элементов различного уровня и их состояний.

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

Вкратце, что она из себя представляет правильный CSS на BEM.

.block — стиль для родительского блока
.block__element — стиль для вложенного дочернего блока.
.blockmodifier — стиль состояния блока.

Возможны различные версии.

У дочернего блока может быть стиль состояния:

У стиля состояния может быть дочерний блок:

По отзывам девелоперов, ее протестировавших, методология BEM несколько уродлива в написании и запутанна в сфере применения.

Например, создатель csswizardry.com Harry Robertsприводит пример:

Нижнее подчеркивание говорит о принадлежности h1 к дочернему элементу. Однако Harry подчеркивает, что не уверен, всегда ли класс для h1 в данном случае следует писать таким образом.

Но тем не менее он несколько раз повторяет на страницах своей статьи мысль: неважно, насколько красио выглядит технология, главное, что она работает!

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

В SASS мы пишем:

В скомпилированном CSS получается:

Sass 3.3+ BEM делает возможным следующую комбинацию:

В скомпилированном CSS получается:

Наследованию конец, генерируется только один класс!

Организация файловой структуры

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

Чаще всего это style.css, но здесь во мне говорит привычка делать макеты на html5 boilerplate. Основной файл макета, куда импортируются все остальные его части (см. ниже)

Включает в себя normalize.css и стили для базовых элементов сайта: html, body, a, ul, li и так далее.

Если вы пользуетесь собственной сеткой или переопределяете готовые фреймворки. Соответственно сюда импортированы папки _mixins, _variables.scss и пр.

Стили для объектов.

Все модули с комментариями. Модули отделены от объектов, как и рекомендует SMACSS. Некоторые девелоперы рекомендуют собрать все модули в один файл и сделать навигацию по комментариям.

Мне же больше близок подход SMACSS, где предлагается рассортировать все по папкам. Я предпочитаю сохранить каждый модуль в отдельном файле и затем импортировать в _modules.scss. Так удобнее редактировать. Также считают и создатели SCSS Bootstrap.

Все, что не вошло в обозначенные выше папки.

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

Dpcm в CSS

We recommend upgrading to the latest Google Chrome or Firefox.

Join GitHub today

GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

CSS-SCSS / > Find file Copy path

Arithmetic with types and values
— associativity
left-associative, evaluation from left to right
— conversion
left value determines type of expression
right value must match or be convertible
* $right->convert_to(ref $self)
Type hierarchy
—————
Value
Number *
Integer
Percentage
Unit
Length
RelativeLength *
Em
Ex == 1/2 em
AbsoluteLength *
Cm
Mm
In
Pt == 1/72 in
Pc == 12 pt
Px == 1/96 in
Angle *
Deg
Grad
Rad
Turn
Time *
S
Ms
Frequency *
Hz
KHz
Resolution *
Dpi
Dpcm
Dppx
Color *
Name
Hex
Rgb
Rgba
Hsl
Hsla
* responsible for value attributes. All child types share these attributes
Arithmetic
———-
+|- ( | )
*|/
  • © 2020 GitHub , Inc.
  • Terms
  • Privacy
  • Security
  • Status
  • Help

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

7 единиц CSS о которых вы должны знать

Работая с CCS, очень легко застрять на каком-то моменте, ведь порой работая даже по знакомому методу, бывает, что появляются новые проблемы.

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

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

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

rem

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

Здесь мы написали, что у div font-size будет равен 1.2em. Это в 1.2 раза больше чем font-size, у которого он унаследовал, он составлял 14px. Таким образом, результат 16.8px.

Однако, что произойдет, если вы каскадом расположите определяемые em font-size внутри друг друга? В следующем отрывке мы применяет тот же самый CCS, что и выше. Каждый div наследует font-size от своего родителя, выдавая нам постепенно увеличивающиеся размеры шрифта.

Не смотря на то, что это может подойти в некоторых случаях, часто мы хотим просто полагаться на единственную метрику для измерения. В этом случае мы должны использовать rem. “r” в rem обозначает “корень”; он равен набору размера шрифта в элементе корня; в большинстве случаев он является элементом HTML.

Во всех трех div из предыдущего примера, шрифт может достигать 16.8px.

5 баллов, Grid

Rem полезны не только в калибровке шрифта. Например, мы могли бы базировать всю систему grid или библиотеку UI по использованию размера шрифта HTML корня rem, и использовать их вычисление в определенных местах. Это дало бы нам более предсказуемую калибровку шрифта и вычисления.

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

vh и vw

Отзывчивые методы веб-дизайна полагаются, в большой степени, на правило процента. Однако процент CSS – не всегда лучшее решение для каждой проблемы. Ширина CSS родственна ближайшему элементу, в котором содержится родитель. Что, если мы хотим использовать ширину или высоту окна просмотра вместо ширины исходного элемента? Это именно то, что помогают делать единицы vh и vw.

Элемент vh равен 1/100 высоты окна просмотра. Например, если высота браузера 900px, 1vh может достигать 9px. Также, если ширина окна просмотра составляет 750px, 1vw может достичь 7.5px.

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

Предположим, вы хотите сделать заголовок, который заполнит всю ширину экрана. Чтобы сделать это, вам необходимо установить font-size в vw. Этот размер будет соизмерим с шириной браузера.

vmin и vmax

В то время как vh и vm всегда связаны с высотой и шириной окна просмотра, также vmin и vmax связаны с максимумом и минимумом этой высоты и ширины, в зависимости от того, какая из них меньше, а какая больше. Например, если браузер имеет параметры 1100px в ширину и 700px в высоту, 1vmin будет 7px, а 1vmax – 11px. Однако, если ширина установлена на 800px, а высота на 1080px, то vmin будет равен 8px, в то время как vmax будет установлен на 10.8px.

В каких случаях вы сможете использовать эти значения?

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

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

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

ex и ch

Единицы ex и ch, так же как em и rem, соотносятся с current font и font size. Однако, поскольку они основаны на определенных для шрифта мерах, ex и ch также соотносятся с font-family, в отличие от em и rem.

Единица ch или единица character, определяется как «улучшенная мера» ширины знака 0. Это понятие вызвало много споров, но основная идея состоит в том, что обладая шрифтом фиксированной ширины, квадрат с шириной N знаками единиц, таких как width: 40ch; могут всегда содержать последовательность из 40 знаков в этом конкретном шрифте. В то время как обычное использование этого особого правила состоит в расположении шрифта Брайля, возможности для креативности здесь, конечно, простираются вне этих простых заявлений.

Единица ex определяется как «х-высота текущего шрифта ИЛИ одна-вторая от em». Thex-высота данного шрифта – высота строчных букв x того шрифта. Чаще всего, это примерно в средней отметке шрифта.

Существует много областей, где могут использоваться подобные единицы. Чаще всего в типографии. Например, элемент sup, который выступает как superscript, может быть добавлен в строку, используя соответствующую позицию и конечное значение 1ex. Точно так же вы можете сбросить нижний элемент. Ошибки браузера исправляются правилами superscript- и subscript-specific vertical-align, но если вы хотите больше контроля, вы можете попробовать следующее:

Вывод

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

Media Screen CSS в адаптивной верстке

Пришло время разобраться, что такое Media Screen в CSS3 и как это применять в своих проектах. Это так называемые Медиа-запросы CSS, с помощью которых можно адаптировать элементы дизайна под разные размеры экранов. Например можно скрыть определенный блок на мобильных и наоборот показывать его только на широких экранах (десктопах). Как я с этим столкнулся. На клиентском сайте логотип на мобильных съезжает вправо, на компьютерах он наоборот слева. Была поставлена задача написать текст, который будет показан слева от лого на маленьких экранах. На больших его быть не должно. На выручку как раз и пришли медиа-запросы Media Screen CSS. Я знаю, что многие из вас очень любят, когда им показывают наглядно, поэтому приготовил пример.

Media-screen примеры

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

Для начала в head нужно добавить такую строчку:

CSS код сейчас такой:

Ставим пред собой задачу на экранах шириной меньше 1000 px изменять цвет текста, фона, покрасить шапку, сместить значок вправо, а слева от него будет появляться надпись. И выглядеть это будет вот так:

То есть мы произведем кардинальные изменения на странице средствами Media screen CSS. Для этого пишем те самые медиа-запросы, которые будут определять ширину экрана девайса и выдавать тот или иной вид.

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

Изменяйте ширину окна браузера, чтобы увидеть изменения. В Хроме есть функция просмотра на разных устройствах. Клавиша F12 Фактически в Media screen CSS мы создаем новые правила, которые вступят в силу только при определенных условиях. В данном случае, если дисплей будет меньше или равен 1000 px. Если будет больше, то ничего меняться не будет.

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

Можно так же взять готовые стили из Bootstrap CSS и подогнать под свой дизайн.

Dpcm в CSS

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

Зачем используется CSS

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

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

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

Развитие CSS

Необходимость разработки CSS была признана консорциумом W3C в 1990-х годах. В 1996 году был принят стандарт CSS1, позволяющий изменять параметры шрифта, цвет, атрибуты текста, выравнивания и отступы. В 1998 году состоялся выход CSS2, добавивший возможности использования блочной верстки, звуковых таблиц, генерируемого содержания, указателей, страничных носителей. Версия CSS3 заметно увеличила возможности стилей: стало доступным создание анимированных элементов без использования JavaScript, появилась поддержка сглаживания, теней, градиентов и т. д. Спецификация была разделена на модули, каждый из которых стал развиваться обособленно. С 2011 года ведется разработка модулей CSS4. Возможности пока описаны в черновых вариантах.

Структура языка

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

Правило состоит из селектора и блока объявлений.

Селекторы

Селектор сообщает, к какому элементу будут применены описываемые в CSS свойства стиля. В качестве селектора может выступать любой тег, которому задается форматирование (размер, цвет и т. д.). Если для тега нужно задать разные стили или применить один для отличных элементов, используются классы и запись вида «Тег.Класс <свойство: значение;>». Имя класса задается латиницей, может содержать подчеркивание или дефис. Если не указывать тег, а начинать запись с «.Класс», то можно использовать правило для любого тега. Если перечислять несколько классов для одного тега, к нему применятся все описанные стили. Идентификатор задает уникальное имя элемента для изменения стиля или обращения с помощью скрипта. Запись «#Идентификатор <свойство: значение;>». Название идентификатора состоит из букв латинского алфавита, допустимо использовать дефис и подчеркивание. Чтобы применить идентификатор к конкретному тегу, указывается его имя, потом без пробела и через знак решетки название идентификатора.

Блок объявлений

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

Подключение CSS

CSS можно связать с HTML несколькими способами:

  • внутри тега с помощью атрибута style. При этом нет нужды указывать селектор;
  • добавить тег с атрибутом type=»text/css»;
  • подключить внешнюю таблицу стилей:
  • .

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

Илон Маск рекомендует:  Max - Функция Delphi
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL