Вики Сообщества
Вики Сообщества
Вики Сообщества
3501
страница
в: Справка, CSS
русский

Справка:CSS/Переменные и медиавыражения

< Справка:CSS
Sign in to edit

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

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

:root { /* Определяем значение переменной */
    --thumb-low-width: 280px;
}

/* При ширине от 768px до 1083px: */
@media only screen and (min-width:768px) and (max-width:1083px) {

    /* Устанавливаем ширину блока */
    .thumb {
        width: var(--thumb-low-width) !important;
    }/*и самого изображения внутри*/
    .thumbimage {
        width: var(--thumb-low-width) !important;
        height: auto;
    }
}

Пример правил Фэндома[]

@media only screen and (max-width:768px) {
    /*... изменяет параметры глобального меню и др. ...*/
}
@media only screen and (min-width:1024px) and (max-width:1083px) {
    .WikiaPage {
        padding: 0 10px; /*изменяется величина отступов*/
        width: 984px /*и ширина самой вики-страницы*/
    }
}
@media only screen and (max-width: 1083px) {
    body.skin-oasis {
        background-image: none; /*отключает картинку-фон при малом разрешении*/
    }
}

@media screen and (min-width:1596px) {
    /*устанавливаются параметры фона при широком разрешении*/
}

Список переменных в FandomDesktop[]

:root {
    --theme-body-dynamic-color-1: #fff;
    --theme-body-dynamic-color-1--rgb: 255, 255, 255;
    --theme-body-dynamic-color-2: #e6e6e6;
    --theme-body-dynamic-color-2--rgb: 230, 230, 230;
    --theme-page-dynamic-color-1: #fff;
    --theme-page-dynamic-color-1--rgb: 255, 255, 255;
    --theme-page-dynamic-color-1--inverted: #000;
    --theme-page-dynamic-color-1--inverted--rgb: 0, 0, 0;
    --theme-page-dynamic-color-2: #e6e6e6;
    --theme-page-dynamic-color-2--rgb: 230, 230, 230;
    --theme-sticky-nav-dynamic-color-1: #000;
    --theme-sticky-nav-dynamic-color-1--rgb: 0, 0, 0;
    --theme-sticky-nav-dynamic-color-2: #3a3a3a;
    --theme-sticky-nav-dynamic-color-2--rgb: 58, 58, 58;
    --theme-link-dynamic-color-1: #000;
    --theme-link-dynamic-color-1--rgb: 0, 0, 0;
    --theme-link-dynamic-color-2: #3a3a3a;
    --theme-link-dynamic-color-2--rgb: 58, 58, 58;
    --theme-accent-dynamic-color-1: #000;
    --theme-accent-dynamic-color-1--rgb: 0, 0, 0;
    --theme-accent-dynamic-color-2: #3a3a3a;
    --theme-accent-dynamic-color-2--rgb: 58, 58, 58;
    --theme-body-background-color: #520044;
    --theme-body-background-color--rgb: 82, 0, 68;
    --theme-body-background-image: none;
    --theme-body-background-image-full: url(https://static.wikia.nocookie.net/wikia/images/0/08/Site-background-dark/revision/latest?cb=20240109130613&path-prefix=ru);
    --theme-body-background-image-desktop: url(https://static.wikia.nocookie.net/wikia/images/0/08/Site-background-dark/revision/latest/scale-to-width-down/1280?cb=20240109130613&path-prefix=ru);
    --theme-body-background-image-large-desktop: url(https://static.wikia.nocookie.net/wikia/images/0/08/Site-background-dark/revision/latest/scale-to-width-down/1500?cb=20240109130613&path-prefix=ru);
    --theme-body-background-image-mobile: url(https://static.wikia.nocookie.net/wikia/images/0/08/Site-background-dark/revision/latest/scale-to-width-down/600?cb=20240109130613&path-prefix=ru);
    --theme-body-background-image-mobile-2x: url(https://static.wikia.nocookie.net/wikia/images/0/08/Site-background-dark/revision/latest/scale-to-width-down/1200?cb=20240109130613&path-prefix=ru);
    --theme-body-background-image-tablets: url(https://static.wikia.nocookie.net/wikia/images/0/08/Site-background-dark/revision/latest/scale-to-width-down/1024?cb=20240109130613&path-prefix=ru);
    --theme-body-background-image-tablets-2x: url(https://static.wikia.nocookie.net/wikia/images/0/08/Site-background-dark/revision/latest/scale-to-width-down/2048?cb=20240109130613&path-prefix=ru);
    --theme-body-text-color: #fff;
    --theme-body-text-color--rgb: 255, 255, 255;
    --theme-body-text-color--hover: #cccccc;
    --theme-sticky-nav-background-color: #ffc500;
    --theme-sticky-nav-background-color--rgb: 255, 197, 0;
    --theme-sticky-nav-text-color: #000;
    --theme-sticky-nav-text-color--hover: #333333;
    --theme-page-background-color: #1e0c1b;
    --theme-page-background-color--rgb: 30, 12, 27;
    --theme-page-background-color--secondary: #40303d;
    --theme-page-background-color--secondary--rgb: 64, 48, 61;
    --theme-page-text-color: #e6e6e6;
    --theme-page-text-color--rgb: 230, 230, 230;
    --theme-page-text-color--hover: #b3b3b3;
    --theme-page-text-mix-color: #827981;
    --theme-page-text-mix-color-95: #281725;
    --theme-page-accent-mix-color: #8f690e;
    --theme-page-headings-font: 'Rubik';
    --theme-link-color: #ffc500;
    --theme-link-color--rgb: 255, 197, 0;
    --theme-link-color--hover: #ffdc65;
    --theme-link-label-color: #000;
    --theme-accent-color: #ffc500;
    --theme-accent-color--rgb: 255, 197, 0;
    --theme-accent-color--hover: #997600;
    --theme-accent-label-color: #000;
    --theme-border-color: #50434e;
    --theme-border-color--rgb: 80, 67, 78;
    --theme-alert-color: #c90018;
    --theme-alert-color--rgb: 201, 0, 24;
    --theme-alert-color--hover: #ff3048;
    --theme-alert-color--secondary: #ff0724;
    --theme-alert-label: #fff;
    --theme-warning-color: #cf721c;
    --theme-warning-color--rgb: 207, 114, 28;
    --theme-warning-color--secondary: #cf721c;
    --theme-warning-label: #000;
    --theme-success-color: #0c742f;
    --theme-success-color--rgb: 12, 116, 47;
    --theme-success-color--secondary: #0f943c;
    --theme-success-label: #fff;
    --theme-message-color: #9c448c;
    --theme-message-label: #fff;
    --theme-community-header-color: #ffffff;
    --theme-community-header-color--hover: #cccccc;
    --theme-background-image-opacity: 100%;
    --theme-page-text-opacity-factor: 0.7;
    --theme-body-text-opacity-factor: 0.7;
    --theme-link-decoration: underline;
}
:root {
    --fandom-global-nav-background-color: #1e0c1b;
    --fandom-global-nav-text-color: #fff;
    --fandom-global-nav-link-color: #ffc500;
    --fandom-global-nav-link-color--hover: #997600;
    --fandom-global-nav-icon-color: #f5f3f5;
    --fandom-global-nav-icon-background-color: #59535880;
    --fandom-global-nav-icon-background-color--hover: #595358;
    --fandom-global-nav-icon-background-color--active: #595358;
    --fandom-global-nav-icon-border-color: #f5f3f5;
    --fandom-global-nav-icon-border-color--hover: #ffffff80;
    --fandom-global-nav-icon-border-color--active: #f5f3f5;
    --fandom-global-nav-bottom-icon-color: #f5f3f5;
    --fandom-global-nav-counter-background-color: #f5f3f5;
    --fandom-global-nav-counter-label-color: #520044;
    --fandom-global-nav-mobile-background-color: var(--fandom-global-nav-background-color);
    --fandom-global-nav-mobile-logo: url(/resources-ucp/mw139/dist/svg/wds-brand-fandom-logo-light.svg?21f57);
    --fandom-global-nav-mobile-logo-background: #1e0c1b;
    --fandom-global-nav-mobile-community-sticky-bar-background-color: var(--theme-sticky-nav-background-color);
    --fandom-global-nav-mobile-community-sticky-bar-color: var(--theme-sticky-nav-text-color);
    --fandom-global-nav-mobile-community-sticky-bar-color--hover: var(--theme-sticky-nav-text-color--hover);
    --fandom-global-nav-mobile-community-bar-background-color: var(--theme-sticky-nav-background-color);
    --fandom-global-nav-mobile-community-bar-color: var(--theme-sticky-nav-text-color);
    --fandom-global-nav-mobile-community-bar-color--hover: var(--theme-sticky-nav-text-color--hover);
    --fandom-global-nav-mobile-community-bottom-border-color: var(--theme-border-color);
    --fandom-global-nav-search-active-link-background-color: #595358;
    --fandom-global-nav-search-active-link-border-color: #fff;
    --fandom-global-nav-mobile-logo-separator-color: #0000;
    --fandom-global-nav-separator-color: #595358;
    --fandom-global-nav-gp-legacy-logo: url(/resources-ucp/mw139/dist/svg/wds-brand-gamepedia-badge-orange.svg?93bf6);
    --fandom-global-nav-border-top-width: 0;
    --fandom-global-nav-overflow-shadow-color: #f5f3f54d;
}
:root {
    --desktop-global-navigation-width: 66px;
}
:root {
    --fandom-primary-color: #1e0c1b;
    --fandom-secondary-color: #291927;
    --fandom-secondary-color--hover: #3e303d;
    --fandom-secondary-reverse-color: #f5f3f5;
    --fandom-text-color: #f5f3f5;
    --fandom-text-color--secondary: #d6d0d5;
    --fandom-text-color--rgb: 245, 243, 245;
    --fandom-text-color--hover: #c7bbc7;
    --fandom-heading-color: #f9edd8;
    --fandom-heading-color--hover: #ebc480;
    --fandom-link-color: #ffc500;
    --fandom-link-color--hover: #997600;
    --fandom-link-color--rgb: 255, 197, 0;
    --fandom-link-color--fadeout: #ffc5004d;
    --fandom-accent-color: #ffc500;
    --fandom-accent-color--secondary: #fa005a;
    --fandom-accent-color--hover: #997600;
    --fandom-accent-label-color: #291927;
    --fandom-border-color: #595358;
    --fandom-border-color--secondary: #d6d0d5;
    --fandom-image-empty-state-color: #520044;
    --fandom-secondary-button-color: #f5f3f5;
    --fandom-secondary-button-color--hover: #c7bbc7;
    --fandom-dropdown-background-color: #291927;
    --fandom-notifications-background-color: #1e0c1b;
    --fandom-notifications-read-card-background-color: #1e0c1b;
    --fandom-notifications-unread-card-background-color: #5953584d;
    --fandom-notifications-footer-text-color: #d6d0d5;
    --fandom-banner-notification-background-color: #1e0c1b;
    --fandom-banner-notifications-close-icon: #f5f3f5;
    --fandom-mobile-body-gradient: linear-gradient(180deg, #291927, #291927 55px, #1e0c1b 100vh, #1e0c1b);
    --fandommobile-fanhub-button-background: #f9edd8;
    --fandommobile-fanhub-button-background--hover: #ebc480;
    --fandom-search-background-color: rgba(var(--fandom-text-color--rgb), 0.1);
    --fandom-search-border-color: rgba(var(--fandom-text-color--rgb), 0.25);
    --fandom-search-color: var(--fandom-global-nav-text-color);
    --fandom-communitybar-search-color: var(--theme-sticky-nav-text-color);
}

Переменные[]

Объявление и использование переменной[]

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

:root {
  --main-color: #ff6f69;
}
body {
  background: var(--main-color);
}
  • функция var поддерживает второй параметр, указывающий значение (или другую CSS-переменную), которое будет использоваться по-умолчанию, если переменная, переданная первой, не определена. Данное значение также может являться переменной:
#title {
  color: var(--main-color, black);
}
.section-title {
  color: var(--main-color, var(--black, #222));
}
Если свойство, записанное в переменной неправильно (не совпадает по типу со значением), но является наследуемым — браузер наследует аналогичное свойство от родителя (или же свойство по-умолчанию)
См. Справка:CSS/Принципы#Наследование

Локальные переменные[]

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

:root {
  --main-color: #235ad1;
}
.section-title {
  --main-color: d12374;
  color: var(--main-color);
}
  • Переменная --main-color является глобальной (обратиться к ней можно из любого элемента документа). Если переопределить её в блоке .section-title, то её новым значением можно будет пользоваться только в этом блоке.

Переопределение переменных[]

Наряду с переопределение глобальных переменных локальными можно воспользоваться дополнительным блоком :root, чтобы переопределить переменные. Однако все значения на странице будут равны последнему заданному значению (не получится задать промежуточное значение для правил между объявлениями)
См. Справка:CSS/Принципы#Порядок 

:root {
  --main-color: #235ad1; /*синий*/
}
.section-title {
  /*--main-color: d12374; красный */
  color: var(--main-color);
}
:root {
  --main-color: #1da532; /*зеленый*/
}
Цвет текста станет зеленым, а не синим.
(если бы локальная переменная не была закомментирована — красным)

Наследование[]

CSS-переменные поддерживают наследование. Если в пределах родительского элемента объявлена CSS-переменная, то элементы-потомки её наследуют: 

<div class="parent">
  <p class="child"></p>
</div>
.parent {
  --size: 20px;
}
.child {
  font-size: var(--size);
}
  • У элемента .child есть доступ к переменной --size, объявленной в родителе .parent.

«Встроенные» переменные[]

Фэндом поддерживает прямое использование встроенных переменных, т.е. объявление
var(--переменная) во встроенных стилях:
style="border-color:var(--my-color,pink)"

Переменные также можно описывать во встроенных стилях, чтобы потом использовать через css: 

<div class="variable-example" style="color:red; --bg:blue"></div>

.variable-example {
  background: var(--bg);
}

Медиавыражения[]

Иначе: медиа-запросы (media queries) ─ это другая функция, пришедшая в CSS3, расширяющая возможности по стилизации. Их функция состоит в том, чтобы определять параметры устройства и задавать отдельные наборы правил для каждого необходимого случая, как то устройства для слепых и слабовидящих, параметры печати страницы, многообразия разрешений, соотношения сторон, альбомную или портретную ориентацию и тип (мобильный/др.) устройства.

Форма записи
@media условие(<логический оператор> условие) {
 стили /* (будут выполняться, если устройство соответствует указанному условию) */
}

Условия[]

  • all Все типы (значение по умолчанию)
  • braille Устройства на основе системе Брайля (предназначены для чтения слепыми людьми)
  • embossed Принтеры, использующие для печати систему Брайля
  • handheld Смартфоны и аналогичные им аппараты
  • print Принтеры и другие печатающие устройства
  • projection Проекторы
  • screen Экран монитора
  • speech Речевые синтезаторы, а также речевые браузеры
  • tty Устройства с фиксированным размером символов
    (телетайпы, терминалы, устройства с ограничениями дисплея)
  • tv Телевизоры

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

  • and Логическое И (указывается для объединения нескольких условий)
  • not Логическое НЕ (указывается для отрицания условия)
    • not имеет наименьший приоритет, т.е. (по аналогии с арифметическими операциями) условия вне его как бы заключаются в скобочки: @media not (all and (monochrome)) {...}
  • only (применяется для старых браузеров, для игнорирования ими медиа-запросов)
  • роль логического оператора ИЛИ выполняет запятая: , (стиль будет применён, если при перечислении нескольких условий выполняется хотя бы одно условие)

Медиа-функции[]

Задают технические характеристики устройства, на котором отображается документ.

  • также являются условиями, но зачастую записываются в скобочках и отражают некоторые параметры
@media only screen and (min-width: 414px) and (max-height: 736px)
 and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
 /* правила для iPhone 6+ */
}

Полный список:

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv Значение: целое число/целое число

  • Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).
color (min-color, max-color)

Тип носителя: handheld, print, projection, screen, tty, tv Значение: целое число

  • Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 23 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное.
color-index (min-color-index, max-color-index)

Тип носителя: handheld, print, projection, screen, tty, tv Значение: целое число

  • Определяет количество цветов, которое поддерживает устройство.
device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv Значение: целое число/целое число

  • Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).
device-height (min-device-height, max-device-height)

Тип носителя: все кроме speech Значение: размер

  • Определяет всю доступную высоту экрана устройства или печатной страницы.
device-width (min-device-width, max-device-width)

Тип носителя: все кроме speech Значение: размер

  • Определяет всю доступную ширину экрана устройства или печатной страницы. В примере 4 в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселов ширина макета задаётся как 1100px.
grid

Тип носителя: all Значение: нет

  • Определяет, что это устройство с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.
height (min-height, max-height)

Тип носителя: все кроме speech Значение: размер

  • Высота отображаемой области.
monochrome (min-monochrome, max-monochrome)

Тип носителя: handheld, print, projection, screen, tty, tv Значение: целое число

  • Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксел. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета).
orientation

Тип носителя: handheld, print, projection, screen, tty, tv Значение: landscape | portrait

  • Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).
resolution (min-resolution, max-resolution)

Тип носителя: handheld, print, projection, screen, tv Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)

  • Определяет разрешение устройства, например, принтера.
scan

Тип носителя: tv Значение: interlace | progressive

  • Определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive).
width (min-width, max-width)

Тип носителя: все кроме speech Значение: размер

  • Описывает ширину отображаемой области.

См. также[]

Українська
Материалы сообщества доступны в соответствии с условиями лицензии CC-BY-SA, если не указано иное.