Полезные сss функции 1 часть

Читать 👨‍💻

#css | #полезности

HTML <template> и <slot> — динамический контент без фреймворков

Раньше, чтобы повторно вставлять куски HTML, приходилось дублировать код или генерировать его в JS строками.
Но есть два тега, которые сильно упрощают задачу: <template> и <slot>.

1. <template> — заготовка для HTML
Этот тег не отображается на странице, пока вы явно не вставите его содержимое через JavaScript.
Пример:

<template id="card-template">
  <div class="card">
    <h3></h3>
    <p></p>
  </div>
</template>

<div id="container"></div>

<script>
  const template = document.getElementById('card-template');
  const container = document.getElementById('container');

  const data = [
    { title: "Карточка 1", text: "Первое описание" },
    { title: "Карточка 2", text: "Второе описание" }
  ];

  data.forEach(item => {
    const clone = template.content.cloneNode(true);
    clone.querySelector('h3').textContent = item.title;
    clone.querySelector('p').textContent = item.text;
    container.appendChild(clone);
  });
</script>

Что происходит:
template.content — это "невидимый" фрагмент HTML.
cloneNode(true) копирует весь его контент.
Мы изменяем текст и вставляем в DOM.

2. <slot> — динамическое содержимое в Web Components
<slot> используется внутри кастомных элементов, чтобы вставлять туда любой HTML снаружи.
Пример:

<template id="user-card">
  <div class="user-card">
    <slot name="avatar"></slot>
    <slot name="info"></slot>
  </div>
</template>
<script>
  class UserCard extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      const template = document.getElementById('user-card');
      shadow.appendChild(template.content.cloneNode(true));
    }
  }
  customElements.define('user-card', UserCard);
</script>

<user-card>
  <img slot="avatar" src="avatar.png" width="50">
  <div slot="info">Имя: Тигран</div>
</user-card>

Что происходит:
Создаём кастомный элемент <user-card>.
Внутри шаблона <slot> указывает, куда вставлять содержимое.
Атрибут slot у дочерних элементов определяет, в какой слот они попадут.
Когда применять
Генерация повторяющихся блоков (карточки, списки, таблицы).
Создание переиспользуемых UI-компонентов без библиотек.
В связке с Web Components для сложных интерфейсов.

#полезности #html

CSS @supports - что это и как использовать?

Читать 👨‍💻

#css | #полезности

Font-stretch css

Читать 👨‍💻

#css | #полезности

Макет для тренировки (Дом страхования)

Перейти к макету 🧑‍💻

#практика | #макет

Задача: Генератор мемов (JS + HTML Canvas)

Создай веб-страницу, где пользователь загружает картинку (через <input type="file">), вводит текст для верхней и нижней части, а скрипт отрисовывает готовый мем в <canvas>.

Условия:
- Текст должен автоматически центрироваться по горизонтали.
- Размер шрифта подстраивается под ширину картинки.
- Готовый мем можно скачать кнопкой "Сохранить".

Подсказка:
Используй canvas.getContext('2d') для рисования изображения и текста. Метод drawImage — для вставки картинки, fillText — для текста.

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Font-stretch css
2. HTML <template> и <slot>
3. Полезные сss функции

Лучшие фронтенд вакансии @job_webdev:
1. Верстальщик
2. HTML-верстальщик
3. Frontend разработчик

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. UI/UX-дизайнер
3. Web-дизайнер

#лучшеезанеделю

JSON to Flowchart

Смотреть на codepen 👨‍💻

#практика

Subgrid: расширенные возможности Grid для вложенных сеток

CSS Grid уже давно стал стандартом для построения сложных макетов. Но есть одна проблема: вложенные элементы не могут «наследовать» линии сетки родителя. Приходилось дублировать разметку или писать громоздкие правила.
Свойство subgrid решает эту задачу. Теперь дочерний grid может использовать сетку родителя, оставаясь при этом самостоятельным контейнером.

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

Пример кода

<div class="wrapper">
  <header>Заголовок</header>
  <section class="content">
    <article>
      <h2>Карточка 1</h2>
      <p>Описание...</p>
    </article>
    <article>
      <h2>Карточка 2</h2>
      <p>Описание...</p>
    </article>
  </section>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* три колонки */
  gap: 1rem;
}

.content {
  display: grid;
  grid-template-columns: subgrid; /* наследуем родительскую сетку */
  grid-column: 1 / -1; /* растягиваемся на всю ширину */
  gap: 1rem;
}

.content article {
  background: #f3f3f3;
  padding: 1rem;
}

В этом примере .content использует ту же сетку, что и .wrapper. Карточки внутри аккуратно «подстраиваются» под общую колонку, а не создают собственную сетку с другими линиями.

Вывод
subgrid — это мощное расширение Grid, которое делает макеты чище и избавляет от хака с дублированием колонок. Уже сейчас можно экспериментировать, а в будущем это станет must-have для сложных адаптивных интерфейсов.

#css

Цветовые функции в CSS: от RGB до color-mix()

Цвета в вебе — это не только red, #000 или blue. В современном CSS есть целый набор цветовых функций, которые дают гибкость и позволяют делать красивые эффекты без графики.

1. rgb() и rgba()
Классика. Цвет задаётся через компоненты красный, зелёный, синий (0–255).
rgb(255, 0, 0) → ярко-красный
rgba(0, 0, 255, 0.5) → полупрозрачный синий
📌 a (alpha) отвечает за прозрачность от 0 до 1.

2. hsl() и hsla()
Более “человеческий” способ. Цвет задаётся через:
h — оттенок (0–360° по цветовому кругу)
s — насыщенность (%)
l — светлота (%)
Пример:
color: hsl(200, 100%, 50%); /* ярко-голубой */
Фишка: легко делать вариации цвета. Например:
hsl(200, 100%, 70%) → светлее
hsl(200, 100%, 30%) → темнее

3. color-mix()
Позволяет смешивать два цвета прямо в CSS.

color: color-mix(in srgb, red 40%, blue);

Здесь берём 40% красного и 60% синего → получится фиолетовый.
Синтаксис:
color-mix(in <цветовое пространство>, <цвет1> <процент>, <цвет2> <процент>)
Можно использовать для плавных переходов, hover-эффектов и генерации палитры без дизайнера.

4. Градиенты
Градиенты — это тоже функции!
Линейный:
background: linear-gradient(90deg, red, blue);
Радиальный:
background: radial-gradient(circle, yellow, green);
Конический (новее):
background: conic-gradient(from 0deg, red, yellow, blue);

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

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

Поддержка браузеров
rgb() и hsl() поддерживаются давно.
color-mix() — работает в Chrome, Safari и Firefox (новые версии).
Градиенты — тоже везде, включая мобильные.

#css | #полезности

Intl API: интернационализация в JavaScript

Обычно разработчики форматируют даты и числа «вручную»: конкатенацией строк или костылями. Но у браузеров уже есть встроенный инструмент — Intl API. Он решает задачи интернационализации (i18n) и избавляет от лишних библиотек.

1. Форматирование чисел
const number = 1234567.89;

console.log(new Intl.NumberFormat('de-DE').format(number));
// 1.234.567,89 (немецкий формат)

console.log(new Intl.NumberFormat('en-US').format(number));
// 1,234,567.89 (американский)
📌 Локаль ('de-DE', 'en-US') задаёт стиль записи чисел.

2. Валюта

const price = 1999.99;

const usd = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
console.log(usd.format(price)); // $1,999.99

const eur = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
console.log(eur.format(price)); // 1.999,99 €

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

3. Даты и время

const date = new Date();

const us = new Intl.DateTimeFormat('en-US').format(date);
console.log(us); // 8/21/2025

const ru = new Intl.DateTimeFormat('ru-RU', { dateStyle: 'full' }).format(date);
console.log(ru); // четверг, 21 августа 2025 г.

📌 Можно настраивать dateStyle, timeStyle, часовые пояса и даже календари.

4. Сравнение строк

const collator = new Intl.Collator('ru-RU');
console.log(['ёж', 'яблоко', 'арбуз'].sort(collator.compare));
// ['арбуз', 'ёж', 'яблоко']

Без Intl.Collator сортировка могла бы работать неправильно для кириллицы.

Где это полезно?
• Мульти-язычные проекты (сайты, интернет-магазины).
• Корректное отображение цен, дат, валют и чисел для разных стран.
• Локализованная сортировка (например, списки по алфавиту).

#полезности