CSS Houdini (введение): Тренажер CSS

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

CSS Houdini — это набор низкоуровневых API, которые открывают доступ к "магии" CSS, позволяя разработчикам расширять возможности CSS и создавать новые функции рендеринга без ожидания их реализации в браузерах. На этом начальном этапе мы сосредоточимся на одном из самых доступных и полезных API Houdini — Properties & Values API, которое позволяет регистрировать пользовательские свойства CSS (CSS Custom Properties) с указанием их типа, начального значения и поведения наследования. Это дает браузеру больше информации о ваших переменных, позволяя анимировать их, обеспечивать типобезопасность и устанавливать значения по умолчанию. В этих заданиях вы попрактикуетесь в регистрации и использовании таких типизированных пользовательских свойств.

Список тем

Регистрация первого пользовательского свойства

Зарегистрируйте пользовательское свойство с именем '--main-bg-color'. Укажите, что оно должно принимать значение типа '<color>', не наследоваться ('inherits: false') и иметь начальное значение 'tomato'. Затем примените это свойство для задания фона элемента с классом 'box'.

CSS

input1 --main-bg-color {
  input2: "<color>";
  input3: false;
  input4: tomato;
}

.box {
  width: 100px;
  height: 100px;
  background-color: var(--main-bg-color);
  margin: 20px;
}

                     input1 --main-bg-color {
  input2: "<color>";
  input3: false;
  input4: tomato;
}

.box {
  width: 100px;
  height: 100px;
  background-color: var(--main-bg-color);
  margin: 20px;
}

HTML

<div class="box"></div>

Используйте правило '@property' для регистрации свойства. Внутри укажите 'syntax: "<color>";', 'inherits: false;' и 'initial-value: tomato;'. Затем в селекторе '.box' используйте 'background-color: var(--main-bg-color);'. Замените 'input1' на '@property', 'input2' на 'syntax', 'input3' на 'inherits' и 'input4' на 'initial-value'.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Регистрация свойства с типом

Зарегистрируйте пользовательское свойство '--box-padding' с типом '<length>'. Укажите, что оно должно наследоваться ('inherits: true') и иметь начальное значение '15px'. Примените это свойство для установки внутреннего отступа ('padding') элемента с классом 'padded-box'.

CSS

@property input1 {
  input2: "<length>";
  input3: true;
  input4: 15px;
}

.padded-box {
  background-color: lightblue;
  border: 2px solid blue;
  padding: var(--box-padding);
  margin: 20px;
  display: inline-block; /* Чтобы padding влиял на размер */
}

                     @property input1 {
  input2: "<length>";
  input3: true;
  input4: 15px;
}

.padded-box {
  background-color: lightblue;
  border: 2px solid blue;
  padding: var(--box-padding);
  margin: 20px;
  display: inline-block; /* Чтобы padding влиял на размер */
}

HTML

<div class="padded-box">Текст внутри блока</div>

Используйте правило '@property --box-padding'. Укажите 'syntax: "<length>";', 'inherits: true;' и 'initial-value: 15px;'. В селекторе '.padded-box' используйте 'padding: var(--box-padding);'. Замените 'input1' на имя свойства '--box-padding', 'input2' на 'syntax', 'input3' на 'inherits', и 'input4' на 'initial-value'.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Наследование зарегистрированных свойств

Зарегистрируйте свойство '--border-color' с типом '<color>', начальным значением 'green' и установите его наследование в 'false'. Примените это свойство к рамке родительского элемента ('parent') и дочернего элемента ('child'). Обратите внимание, как значение применяется к дочернему элементу.

CSS

input1 --border-color {
  syntax: "<color>";
  input2: false;
  input3: green;
}

.parent {
  border: 5px solid var(--border-color);
  padding: 20px;
  margin: 20px;
}

.child {
  border: 3px dashed var(--border-color);
  padding: 15px;
  margin-top: 10px;
  background-color: #eee;
}

                     input1 --border-color {
  syntax: "<color>";
  input2: false;
  input3: green;
}

.parent {
  border: 5px solid var(--border-color);
  padding: 20px;
  margin: 20px;
}

.child {
  border: 3px dashed var(--border-color);
  padding: 15px;
  margin-top: 10px;
  background-color: #eee;
}

HTML

<div class="parent">
  Родитель
  <div class="child">
    Потомок
  </div>
</div>

Используйте '@property --border-color'. Укажите 'syntax: "<color>";', 'inherits: false;' и 'initial-value: green;'. В селекторе '.parent' задайте 'border: 5px solid var(--border-color);'. В селекторе '.child' также задайте 'border: 3px dashed var(--border-color);'. Так как 'inherits' установлено в 'false', дочерний элемент не унаследует значение 'green' от родителя, а будет использовать свое начальное значение (если оно не переопределено явно для '.child'). Замените 'input1' на '@property', 'input2' на 'inherits', 'input3' на 'initial-value'.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Использование типа для трансформации

Зарегистрируйте свойство '--rotation' с типом '<angle>', начальным значением '0deg' и наследованием 'false'. Используйте это свойство для поворота элемента с классом 'spinner' при наведении на него курсора мыши (установите поворот в 45deg при :hover).

CSS

input1 --rotation {
  input2: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.spinner {
  width: 80px;
  height: 80px;
  background-color: gold;
  margin: 50px auto;
  transform: rotate(var(input3));
  transition: transform 0.5s ease-in-out;
}

.spinner:hover {
  input4: 45deg;
}

                     input1 --rotation {
  input2: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.spinner {
  width: 80px;
  height: 80px;
  background-color: gold;
  margin: 50px auto;
  transform: rotate(var(input3));
  transition: transform 0.5s ease-in-out;
}

.spinner:hover {
  input4: 45deg;
}

HTML

<div class="spinner"></div>

Зарегистрируйте свойство с помощью '@property --rotation'. Укажите 'syntax: "<angle>";', 'inherits: false;' и 'initial-value: 0deg;'. В селекторе '.spinner' используйте 'transform: rotate(var(--rotation));'. В селекторе '.spinner:hover' переопределите значение '--rotation: 45deg;'. Также добавьте 'transition: transform 0.5s;' для плавной анимации. Замените 'input1' на '@property', 'input2' на 'syntax', 'input3' на '--rotation', 'input4' на '--rotation'.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Анимация зарегистрированного свойства

Зарегистрируйте свойство '--progress' с типом '<percentage>', начальным значением '0%' и наследованием 'false'. Создайте простой индикатор прогресса (элемент 'progress-bar'), ширина которого управляется свойством '--progress'. Добавьте анимацию, которая изменяет '--progress' от 0% до 100% за 3 секунды.

CSS

input1 --progress {
  input2: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.progress-container {
  width: 90%;
  height: 20px;
  border: 1px solid #ccc;
  margin: 50px auto;
  background-color: #eee;
}

.progress-bar {
  height: 100%;
  background-color: dodgerblue;
  width: var(input3);
  animation: load-progress 3s linear infinite; /* Добавим infinite для наглядности */
}

input4 load-progress {
  from {
    input5: 0%;
  }
  to {
    input6: 100%;
  }
}

                     input1 --progress {
  input2: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.progress-container {
  width: 90%;
  height: 20px;
  border: 1px solid #ccc;
  margin: 50px auto;
  background-color: #eee;
}

.progress-bar {
  height: 100%;
  background-color: dodgerblue;
  width: var(input3);
  animation: load-progress 3s linear infinite; /* Добавим infinite для наглядности */
}

input4 load-progress {
  from {
    input5: 0%;
  }
  to {
    input6: 100%;
  }
}

HTML

<div class="progress-container">
  <div class="progress-bar"></div>
</div>

Используйте '@property --progress' с 'syntax: "<percentage>";', 'inherits: false;' и 'initial-value: 0%;'. Для элемента '.progress-bar' установите 'width: var(--progress);'. Создайте анимацию '@keyframes load-progress' { from { --progress: 0%; } to { --progress: 100%; } }. Примените эту анимацию к '.progress-bar' с помощью 'animation: load-progress 3s linear infinite;'. Замените 'input1' на '@property', 'input2' на 'syntax', 'input3' на '--progress', 'input4' на '@keyframes', 'input5' на '--progress', 'input6' на '--progress'.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку