25

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

Это просто пример:

:root {
  --main-color: #9BC53D;
  --secondary-color: #EBFFFA;
}
body {
  margin: 0;
  padding: 0;
}
div {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 20%;
  top: 20%;
  left: 20%;
  bottom: 20%;
  text-align: center;
  background: var(--main-color);
  color: var(--secondary-color);
}
<div>I am an example!</div>

Больше примеров можно найти тут.

5
  • 1
    ассоциация: stackoverflow.com/q/45387780/1548895 12 мар 2018 в 11:03
  • 1
    Заминусовал все ответы кроме Qwertiy, так как они про CSS-переменные, которые вообще никак не связаны с селектором :root (а вопрос же именно про это), потому что CSS-переменные можно задавать в любом селекторе. 12 мар 2018 в 11:05
  • 1
    @VadimOvchinnikov мы уже в комментариях это уже давно выяснили. Тем не менее, информация в ответах многим полезна, хоть и не по теме вопроса. 12 мар 2018 в 11:18
  • 1
    Вся информация должна быть в ответах — это справедливое местное правило. Ни в одном ответе нет никакой оговорки о несоответствии вопросов и ответов. Также ответы сами по себе сильно путают насчёт необходимости использования селектора :root для CSS-переменных. А мне не хочется чтобы мои коллеги бездумно использовали этот селектор, не понимая что без него можно обойтись. 12 мар 2018 в 11:49
  • 1
    @VadimOvchinnikov По этой причине и принят ответ именно Qwertiy как правильный. 12 мар 2018 в 12:30

6 ответов 6

19

:root не делает ничего интересного. Его фишка в том, что он может ссылаться на любой корневой элемент. В HTML-файле это будет html, в SVG-файле svg, в XML-файле любой его корневой элемент.

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

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

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

5
  • 1
    Вы про :root на html буке походу читали? 7 мар 2017 в 13:30
  • 1
    @VadimOvchinnikov, с какой целью сделана эта правка?
    – Qwertiy
    12 мар 2018 в 11:55
  • 1
    @Qwertiy Все аббривеатуры пишутся с большой буквы (т.е. HTML, SVG, XML), так верно (можете посмотреть статьи про эти вещи, они везде с большой буквы), а что? 12 мар 2018 в 12:00
  • 1
    А мне больше нравится маленькими. И вообще не вижу смысла в подобных правках.
    – Qwertiy
    12 мар 2018 в 12:52
  • 1
    @Qwertiy, я бы их ещё грависами обернул:))
    – Arthur
    15 мар 2018 в 8:34
9

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

:root {
  --color: red;
}
body {
  margin: 0;
  padding: 0;
}
div {
  color: var(--color);
}
p {
  color: var(--color);
}
span {
  color: var(--color);
}
<div>Один</div>
<p>Два</p>
<span>Три</span>

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

Но самая большая проблема в том, что CSS-переменные начали использоваться совсем недавно. Их не поддерживают большинство "отсталых" и почти все старые версии любых браузеров. Их не поддерживает IE, Edge, Yandex (хоть и создан на Chromium) и несколько других.

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

9
  • 1
    по-моему, этот ответ больше относится к цсс-переменным, чем к :root. 3 мар 2017 в 21:11
  • 1
    @SashaOmelchenko, я думал именно по ним вопрос..
    – Yuri
    3 мар 2017 в 21:12
  • 2
    а вот и нет! ) что касается цсс-переменных и :root, раз уж о них зашла речь, то мне это кажется просто модным способом задания глобальных переменных, ведь если записать их как свойства тега html, то суть не изменится вообще никак. 3 мар 2017 в 21:15
  • 1
    @SashaOmelchenko, ну я в ответе поменял на переменные. Сути это не меняет. Ну вопрос по ним, я думаю, а там посмотрим.
    – Yuri
    3 мар 2017 в 21:16
  • 2
    Вроде это именно по ним ударит. Пока народ будет наслаждаться 3D пространством сайта, нейроинтерфейсами для заказа пиццы, они откроют для себя CSS-переменные. Лучше как ВК делала - при заходе с осла, был прямой редирект на страницу с ссылками нормальных браузеров.
    – user207618
    3 мар 2017 в 21:40
7
+50

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

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

Варианты использования:

Самый простой пример конечно же есть в самом вопросе:

:root {
  --main-color: #06c;
  --accent-color: #006;
}
#foo h1 {
  color: var(--main-color);
}

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

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

:root {
  --main-color: #c06;
  --accent-background: linear-gradient(to top, var(--main-color), white);
}
html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  background: var(--accent-background) no-repeat;
}

При этом и значения в самом градиенте изменятся вместе с основным цветом.

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

:root,
:root:lang(en) {--external-link: "Английский"}
:root:lang(de) {--external-link: "Немецкий"}

a[href^="http"]::after {content: var(--external-link) }
<a href="http://"></a>

Так же значения из CSS можно использовать и в JS.

//CSS
:root { --color: blue; --new-color: green; }

//JS
function changeDocColor() {
    elem.style.setProperty('--color', 'var(--new-color)');
}

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

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

'use strict';

// Auxiliary method. Retrieves and sanitises the value of a custom property.
var getVariable = function(styles, propertyName) {
  return String(styles.getPropertyValue(propertyName)).trim();
};

// Auxiliary method. Sets the value of a custom property at the document level.
var setDocumentVariable = function(propertyName, value) {
  document.documentElement.style.setProperty(propertyName, value);
};

// Sets the document color scheme to the color scheme of the clicked element.
// This illustrates how it's easy to make a change affecting a large number of
// elements by simply changing a few custom properties.
var chooseDefaultColor = function(event) {
  // Get the styles for the event target (the clicked button), so we can see
  // what its custom properties are set to.
  var styles = getComputedStyle(event.target);

  // Get the values for the button's colours...
  var primary = getVariable(styles, '--primary-color');
  var text = getVariable(styles, '--primary-color-text');
  // ... and apply them to the document.
  setDocumentVariable('--primary-color', primary);
  setDocumentVariable('--primary-color-text', text);
};

// Initialise page controls.
window.addEventListener('load', function() {
  // Get the styles for the document.
  // This is where we've chosen to store all the global variables we use.
  var styles = getComputedStyle(document.documentElement);

  var quantum = document.getElementById('quantum');
  var gutter = document.getElementById('gutter');
  var columns = document.getElementById('columns');

  // Set up event handlers for buttons.
  var buttons = document.querySelectorAll('.picker-button');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', chooseDefaultColor);
  }

  // Retrieve initial custom property values and update controls.
  quantum.value = getVariable(styles, '--spacing-unit').replace('px', '');
  gutter.value = getVariable(styles, '--margins');
  columns.value = getVariable(styles, '--grid-columns');

  // Set up event handlers for having the sliders update the custom properties
  // at the document level.
  quantum.addEventListener('input', function() {
    setDocumentVariable('--spacing-unit', quantum.value + 'px');
  });

  gutter.addEventListener('input', function() {
    setDocumentVariable('--margins', gutter.value);
  });

  columns.addEventListener('input', function() {
    setDocumentVariable('--grid-columns', columns.value);
  });
});
:root {
  /*************************** Page-wide variables ****************************/

  /* Base spacing unit. */
  --spacing-unit: 6px;

  /* Margin size. No unit, because it's a multiple of the spacing unit. */
  --margins: 2;

  /* Colors. */
  --primary-color: #5E35B1;
  --primary-color-text: #FFF;

  /* Number of columns to show. */
  --grid-columns: 3;

  /***************************** Calculated values ****************************/
  /* We don't use calc here because we don't want to resolve the values yet.
     You can think of these as simple textual replacements. */

  /* The size of the margin around the card grid. */
  --margin-size: (var(--margins) * 2);
  /* How much internal padding each cell should have */
  --cell-padding: (4 * var(--spacing-unit));
  /* How big the space between cells should be */
  --grid-gutter: (var(--margins) * var(--spacing-unit));
  /* How big the space should be around the grid */
  --grid-margin: (var(--margin-size) * var(--spacing-unit));
  /* Calculated cell margin */
  --cell-margin: (var(--grid-gutter) / 2);
}

.header {
  display: block;
  position: relative;
  height: calc(28 * var(--spacing-unit));
  /* Use a default value for the background color, by passing it in as the 2nd
     parameter to var(). We don't strictly need it in this case, since we've
     defined it at the document level, but this illustrates common usage. */
  background-color: var(--primary-color, #5E35B1);
  padding-left: calc(4 * var(--spacing-unit));

  transition: background-color 1s;
}

.title {
  position: relative;
  top: calc(8 * var(--spacing-unit));
  font-family: 'Roboto', 'Helvetica', sans-serif;
  font-size: calc(4 * var(--spacing-unit));
  font-weight: 400;
  color: var(--primary-color-text);

  transition: color 1s;
}

.shade {
  display: block;
  box-sizing: border-box;
  position: absolute;
  padding-left: calc(1 * var(--spacing-unit));
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(8 * var(--spacing-unit));
  background-color: rgba(0, 0, 0, 0.2);
}

.grid {
  /* Resets */
  margin: 0;
  border: 0;
  padding: 0;

  display: flex;
  flex-flow: row wrap;
  align-items: stretch;

  padding: calc(var(--grid-margin) - var(--cell-margin));

  background-color: var(--grid-color);
}

.cell {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  color: rgb(97, 97, 97);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: calc(var(--cell-margin));
  background-color: var(--cell-color);
  width: calc(100% / var(--grid-columns) - var(--grid-gutter));
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
      0 3px 1px -2px rgba(0,0,0,.2),
      0 1px 5px 0 rgba(0,0,0,.12);
}

.cell-title {
  font-size: calc(3 * var(--spacing-unit));
}

.cell-header {
  display: flex;
  align-items: center;
  color: var(--primary-color-text);
  box-sizing: border-box;
  background-color: var(--primary-color);
  padding-left: calc(var(--cell-padding));
  height: calc(12 * var(--spacing-unit));
}

.cell-content {
  font-size: calc(2.5 * var(--spacing-unit));
  padding: calc(var(--cell-padding));
  flex-grow: 1;
}

.cell-actions {
  padding: calc(2 * var(--spacing-unit));
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.picker-button {
  position: relative;
  font-family: 'Roboto', 'Helvetica', sans-serif;
  font-size: calc(2 * var(--spacing-unit));
  display: inline-block;
  box-sizing: border-box;
  border: none;
  border-radius: 2px;
  color: var(--primary-color);
  text-decoration: none;
  padding: calc(2 * var(--spacing-unit));
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  text-transform: uppercase;

  transition: background-color 0.2s;
}

.picker-button:focus {
  outline: none;
}

.picker-button:active {
  background-color: #DDD;
}

.controls {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 4px;
  right: 4px;
  font-family: sans-serif;
  font-size: 12px;
  padding: 8px;
  background-color: rgba(200, 200, 200, 0.8);
}

.control {
  display: flex;
  align-items: center;
  margin: 0 0 8px 0;
}

.control-key {
  flex-grow: 1;
  margin-right: 16px;
}

.control-value {
  width: 152px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <div class="title">CSS Variable Demo</div>
  <div class="shade"></div>

  <div class="controls">
    <p class="control">
      <span class="control-key">Spacing unit:</span>
      <input class="control-value" type="range" id="quantum" min="4" max="8" step="1">
    </p>
    <p class="control">
      <span class="control-key">Columns:</span>
      <input class="control-value" type="range" id="columns" min="1" max="4" step="1">
    </p>
    <p class="control">
      <span class="control-key">Margins:</span>
      <input class="control-value" type="range" id="gutter" min="1" max="5" step="1">
    </p>
  </div>
</div>
<div class="grid">
  <div class="cell" style="--primary-color: #F44336; --primary-color-text: #FFF;">
    <header class="cell-header">
      <div class="cell-title">
        Red
      </div>
    </header>
    <main class="cell-content">
      Click the buttons on the cards to set the default color scheme for the
      whole sample.
    </main>
    <div class="cell-actions">
      <button class="picker-button">
        Use this color
        <div class="ripple"></div>
      </button>
    </div>
  </div>
  <div class="cell" style="--primary-color: #E91E63; --primary-color-text: #FFF;">
    <header class="cell-header">
      <div class="cell-title">
        Pink
      </div>
    </header>
    <main class="cell-content">
      The colors on the cards are not affected because they're individually
      defined at the card level, and thus prioritised according to standard CSS
      rules.
    </main>
    <div class="cell-actions">
      <button class="picker-button">
        Use this color
        <div class="ripple"></div>
      </button>
    </div>
  </div>
  <div class="cell" style="--primary-color: #9C27B0; --primary-color-text: #FFF;">
    <header class="cell-header">
      <div class="cell-title">
        Purple
      </div>
    </header>
    <main class="cell-content">
      Use the controls above to adjust some properties that affect the entire
      page.
    </main>
    <div class="cell-actions">
      <button class="picker-button">
        Use this color
        <div class="ripple"></div>
      </button>
    </div>
  </div>
  <div class="cell" style="--primary-color: #00BCD4; --primary-color-text: #424242;">
    <header class="cell-header">
      <div class="cell-title">
        Cyan
      </div>
    </header>
    <main class="cell-content">
      Every size on the page is calculated as a multiple of the spacing unit,
      so setting the property to a different value resizes all elements.
    </main>
    <div class="cell-actions">
      <button class="picker-button">
        Use this color
        <div class="ripple"></div>
      </button>
    </div>
  </div>
  <div class="cell" style="--primary-color: #009688; --primary-color-text: #FFF;">
    <header class="cell-header">
      <div class="cell-title">
        Teal
      </div>
    </header>
    <main class="cell-content">
      Changing the number of columns is done by recalculating the relative size
      of cells on the grid.
    </main>
    <div class="cell-actions">
      <button class="picker-button">
        Use this color
        <div class="ripple"></div>
      </button>
    </div>
  </div>
  <div class="cell" style="--primary-color: #4CAF50; --primary-color-text: #424242;">
    <header class="cell-header">
      <div class="cell-title">
        Green
      </div>
    </header>
    <main class="cell-content">
      Margins adjusts both the spacing around the grid and the gutters inside of
      it.
    </main>
    <div class="cell-actions">
      <button class="picker-button">
        Use this color
        <div class="ripple"></div>
      </button>
    </div>
  </div>
</div>

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

0
6

Раз уж вопрос был на самом деле о custom properties, а не о псевдоклассе :root, то приведу несколько примеров, благодаря которым мне они понравились.

Хотя препроцессоры умеют использовать свои внутренние переменные, они всё равно не умеют делать такую вещь, которая, кажется, всеми ожидалась: после изменения переменной автоматически менять имеющиеся свойства, которые её используют. Пример, унылые препроцессорные переменные, синтаксис SCSS:

$main-index: 20px;

.block {
  padding: $main-index;
}

.block-number-2 {
  font-size: $main-index;
}

@media (max-width: 900px) {
  $main-index: 20px;

  /* хотелось бы не задавать заново все свойства, но придётся :( */

  .block {
    padding: $main-index;
  }

  .block-number-2 {
    font-size: $main-index;
  }
}

Пример с модными CSS-переменными (разницу можно увидеть даже тут, если нажать на На всю страницу):

:root {
  --main-index: 20px;
}

div {
  width: calc(var(--main-index) * 10);
  height: calc(var(--main-index) * 8);
  border: 1px solid;
}

.block {
  padding: var(--main-index);
}

.block-number-2 {
  font-size: var(--main-index);
}

@media (max-width: 900px) {
  :root {
    --main-index: 10px;
  }
}
<div class=block>Text inside block 1</div>

<div class=block-number-2>Text inside block 1</div>

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


Наконец-то можно разделить свойство transform, если используешь больше одной трансформации (хотя нам уже давно обещают сделать индивидуальные свойства scale, translate и прочие). Раньше анимировать несколько свойств или перезаписать их при помощи JS было тем ещё упражнением, но теперь всё изменилось! Пример:

var block = document.querySelector('.transformator'),
    bodyStyles = window.getComputedStyle(document.body),
    scale = bodyStyles.getPropertyValue('--scale'),
    trX = bodyStyles.getPropertyValue('--trX'),
    trY = bodyStyles.getPropertyValue('--trY'),
    rotation = bodyStyles.getPropertyValue('--rotation');

document.querySelector('.controller').onclick = function(e) {
  if ( e.target.classList.contains('scale') ) {
    scale *= 1.1;
    
    block.style.setProperty('--scale', scale);
  } else if ( e.target.classList.contains('rotate') ){
    rotation = parseInt(rotation) + 15 + 'deg';
    
    block.style.setProperty('--rotation', rotation);
  } else if ( e.target.classList.contains('movex') ){
    trX = parseInt(trX) + 10 + 'px';
    
    block.style.setProperty('--trX', trX);
  } else if ( e.target.classList.contains('movey') ){
    trY = parseInt(trY) + 10 + 'px';
    
    block.style.setProperty('--trY', trY);
  }
}
:root {
  --trX: 0;
  --trY: 0;
  --rotation: 0deg;
  --scale: 1;
  --base: 50px;
}

.transformator {
  width: var(--base);
  height: var(--base);
  background-image: linear-gradient(#2196f3 0%, #2196f3 50%, #ff0 50%);
  /* Slava Ukraini! */
  transform: scale(var(--scale)) translate3d(var(--trX), var(--trY), 0) rotate(var(--rotation));
  transition: transform .5s;
}

.controller {
  margin-bottom: var(--base);
}
<div class=controller>
  <button class=scale>scale +10%</button>
  <button class=rotate>rotate 15 deg</button>
  <button class=movex>move X +10px</button>
  <button class=movey>move Y +10px</button>
</div>

<div class=transformator></div>


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

:root {
  --start-index: 3;

  --a: calc( var(--start-index) * 20px);
  --b: calc( (var(--start-index) + var(--start-index) / 3) * 20px);
  --c: calc( (var(--start-index) + (var(--start-index) / 3) * 2) * 20px);
}

.pythagorean-triangle {
  position: relative;
  width: var(--b);
  height: var(--a);
}

.pythagorean-triangle div {
  height: 1px;
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
}

.pythagorean-triangle__a {
  width: var(--a);
  transform: rotate(90deg);
  transform-origin: 0 0;
}

.pythagorean-triangle__b {
  width: var(--b);
}

.pythagorean-triangle__c {
  width: var(--c);
  left: auto !important;
  right: 0;
  transform: rotate(-36.8deg);
  transform-origin: 100% 0;
}

@media (min-width: 900px) {
  :root {
    --start-index: 30;
  }
}
<div class=pythagorean-triangle>
  <div class=pythagorean-triangle__a></div>
  <div class=pythagorean-triangle__b></div>
  <div class=pythagorean-triangle__c></div>
</div>

Коэффициенты подогнаны исходя из простейшего 3² + 4² = 5².

Генерировать и менять размеры равносторонних фигур и фигур, с зависимыми друг от друга свойствами (квадраты, круги, овалы, параллелепипеды), стало просто, как никогда! )


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

.sprite {
  display: none;
}

.cross {
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 200px;
}

.cross--red {
  --one-color: red;
  --two-color: #9a1616;
}

.cross--green {
  --one-color: green;
  --two-color: #5ef636;
}

.cross--blue {
  --one-color: blue;
  --two-color: #4666d5;
}
<svg xmlns="http://www.w3.org/2000/svg" class=sprite>
  <g id="icon">
    <rect width="100" height="10" x="0" y="40" style="fill: var(--one-color, #000)"/>
    <rect width="10" height="200" x="45" y="0" style="fill: var(--two-color, #000)" />
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" class="cross">
  <use xlink:href="#icon"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" class="cross cross--red">
  <use xlink:href="#icon"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" class="cross cross--green">
  <use xlink:href="#icon"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" class="cross cross--blue">
  <use xlink:href="#icon"/>
</svg>

P.S. на этом всё, очень жаль, что конкурс я интерпретировал как лучшее определение псевдокласса :root. Надеюсь набор этих юз-кейсов вас заинтересует.

P.P.S. отметьте уже наконец ответ от @Qwertyi как принятый )

9
  • 1
    Спасибо. Сперва хотел отметить ваш ответ, но, все же. Исходя из вопроса, наиболее правильным будет ответ именно Qwertyi. Однако, услышать я хотел именно ваш ответ. Жаль, что я уже выбрал конкурсный вопрос. 11 мар 2017 в 18:53
  • 1
    @AlexeyGiryayev попробуйте написать админам, теоретически они могут переставить награду ) 11 мар 2017 в 18:58
  • 1
    А как написать админам? 11 мар 2017 в 19:17
  • 1
    @AlexeyGiryayev например, в чате chat.stackexchange.com/rooms/22462/stack-overflow-- тегните NicolasChabanovsky или NickVolynkin через @ 11 мар 2017 в 19:28
  • 1
    @SashaOmelchenko нет, не можем переставлять.
    – Nick Volynkin
    21 мар 2017 в 2:34
3

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

Теория

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

А что является корневым элементом для HTML-страницы? Это элемент <html>. Получается, что с помощью псевдокласса :root мы будем получать доступ к нему.

Вы можете сказать, а зачем мне вообще использовать псевдокласс :root, когда я могу написать так:

html { background-color: #fcfcfc; }

И успешно получить доступ к элементу ?

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

Используя такую запись:

:root { background-color: #fcfcfc; }

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

Вот пример документа, где это можно использовать на практике.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
:root {background-color:#000; }
p {color:#fff;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<p>Пример документа</p>
</body>
</html>

CSS-переменные

Однако :root используется также для задания переменных в CSS. Вот здесь и начинаются настоящие чудеса:

:root {
  --color-main: #333333;
  --color-alert: #ffecef;
}

.error {
  color: var(--color-alert);
}

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

Вывод

Напоследок, хочу сказать, что псевдокласс :root появился совсем недавно и в старых браузерах он работать не будет. А поддержка :root в IE и Edge совсем удручает:

введите сюда описание изображения

9
  • 3
    а что мешает задавать базовые значения цсс-переменных не в :root, а в html? 7 мар 2017 в 13:49
  • 1
    @SashaOmelchenko в моем ответе все расписано: "Но, не стоит забывать, что CSS – это технология, которая используется не только для html-документов, ее также можно применять и к XML-страницам и SVG-файлам, и.т.д." 7 мар 2017 в 14:11
  • 6
    "Напоследок, хочу сказать, что псевдокласс :root появился совсем недавно и в старых браузерах он работать не будет. А поддержка :root в IE и Edge совсем удручает:" и привёл скриншот для css-переменных. Сам по себе :root согласно caniuse поддерживается в IE9+.
    – Qwertiy
    7 мар 2017 в 16:18
  • 2
    @AlexeyGiryayev вы бы определились о чем вопрос — о псевдоклассе :root или о кастом пропертис ака цсс-переменных. 10 мар 2017 в 8:24
  • 2
    @AlexeyGiryayev конечно! jsfiddle.net/yh1egu7s 10 мар 2017 в 19:42
1

Реальный опыт эксплуатации именно :root - только для написания стилей под конкретный браузер. browser strangeness. Работает как раз благодаря тому, что не все его поддерживают.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.