Заметки по фронту

0_readme.md

Заметки по CSS

Источник находится здесь: https://www.youtube.com/watch?v=YFDKCAksZWw

Поиграть с цветами: https://gradient.style

alignments.css

.item {
  grid-row: 1 / 4;
  display: grid;
  
  /* вертикальное выравнивание блоков относительно друг друга */
  grid-template-rows: subgrid;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  
  /* размещение блоков в виде masonry сетки */
  grid-template-rows: masonry;
}

/* отступы в зависимости от локализации.
 Например, английская, арабская и японская.
*/
.item {
  padding-inline-start: 16px;
  padding-inline-end: 16px;
  padding-block-start: 16px;
  padding-block-end: 16px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  
  /* отступы между блоками flex контейнеров */
  gap: 40px 20px;
}

/* изменить ширину блока по минимальной возможной в зависимости от контента */
width: min-content;

/* изменить ширину блока по максимально возможной в зависимости от контента */
width: max-content;

/* изменить ширину блока чтобы было чётко */
width: fit-content;

animation.css

/* новая функция плавного воспроизведени анимации */
linear(1, -0.5, 0);

/* анимация будет только если браузер это разрешит */
@media(prefers-reduced-motion: no-preference) {
  html: {
    /* плавная прокрутка страницы по ссылкам-якорям */
    scroll-behavior: smooth;
  }
}

colors.css

color: oklch(64% .1 233deg)
color-mix(in oklch, blue, white)

accent-color: blue;
color: currentColor;
border: 1px solid currentColor;
color: rgb(from tomato calc(r - 20) calc(g - 20) calc(b - 20));
color: rgb(from tomato r g b / 50%)
background: linear-gradient(in oklch to right, blue, red)

/* предпочтительная цветовая схема */
@media(prefers-color-scheme: light) {}
@media(prefers-color-scheme: dark) {}

/* разрешённая цветовая схема */
:root {
  color-scheme: light dark;
}

containers.css

/* контейнерные запросы */
.container {
  container-type: inline-size;
}

.card {
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

/* применяет стили в соответствии с выбранным общим стилем */
@container style(--sunny: true) {}
@container style(--rain: true) {}

focus.css

/* исправляет выделение элементов при фокусировании */
.button:focus-visible {
  border: 2px solid white;
  outline: none;
}

has.css

.card:has(.card__image) {}

/* применяем стили к .card, если за h2 идёт p */
.card h2:has(+ p) {}

images.css

.item {
  aspect-ratio: 16 / 9;
  aspect-ratio: 1; // квадрат
}

.item {
  /* выделяет область изображения */
  object-view-box: inset(25% 20% 15% 0%);
}

.item {
  /* режим смешивания */
  mix-blend-mode: multiply;
}

.item {
  /* применяет фильтр для фона */
  backdrop-filter: blur(10px);
}

.item {
  /* позволяет использовать конический градиент */
  background-image: conic-gradient(white, 0.25turn, black);
}

.item {
  /* позволяет использовать конический градиент и дублировать его по всей площади */
  background: repeating-conic-gradient(
    from 45deg at 10% 50%,
    brown 0deg 10deg,
    darkgoldenrod 10deg 20deg,
    chocolate 20deg 30deg
  )
}

/*
 * задаёт разные изображения для разных типов экранов.
 * браузер сам выберет нужное в зависимости от устройства пользователя.
*/
div {
  background-image: image-set(
    url("[email protected]") type("image/webp") 1x,
    url("[email protected]") type("image/webp") 2x,
    url("[email protected]") type("image/png") 1x,
    url("[email protected]") type("image/png") 2x
  )
}

/* задать в качестве фона часть изображения */
.box: {
  cursor: image("sprite.png#xywh=32,64,16,16");
  background-image: image("some.webp#xywh=0,20,40,60");
  background-image: image(rgba(0,0,0,.25)), url("some.png");
  list-style-image: image(ltr "right-arrow.png");
}

layers.css

/* указывает порядок применения слоёв */
@layer variations, components;

@layer components {
  .button {}
}

@layer variations {
  .buttin--ghost {}
}

nested.css

/* использует вложенные условия прямо как в scss */
.card {
  &:hover {}
  
  @container (width >= 480px) {}
}

queries.css

/* да, теперь можно так */
@media (400px <= width <= 1000px) {}

/* изменение при включении режима экономии трафика */
@media (prefers-reduced-data: reduce) {
  .image {
    background-image: url("images/small-image.jpg")
  }
}

scopes.css

.title {
  font-size: 2rem;
  font-weight: bold;
  color: red;
}

/*
 * будут применены только эти стили для элемента .title внутри .card.
 * раннее определённые стили будут проигнорированы.
 */
@scope (.card) {
  .title {
    font-weight: 400;
  }
}

scrolling.css

/* прокрутка */
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(300px);
scroll-snap-type: y mandatory;
scroll-snap-align: start;

/* скроллбар и прокрутки */
overscroll-behavior: contain;
overscroll-behavior-x: contain;
overscroll-behavior-y: contain;

scroll-behavior: smooth;

/* устраняет проблему "прыгающих" страниц при открытии блоков на весь экран когда скрывается scrollbar */
scrollbar-gutter: stable;

sizes.css

/* высота всего экрана без учёта control bar мобил */
height: 100vh;

/* высота с учётом control bar */
height: 100svh;

/* высота без учёта control bar */
height: 100lvh;

/* высота с автоматическим определением наличия control bar */
height: 100dvh;

/* задать размер элемента 50%, но не меньше 200px и не больше 1000px */
width: clamp(200px, 50%, 1000px);

styles.css

/* изменяет маркер списка на указанный в контенте. Хоть эмоджи. */
li::marker {
  content: "🌵";
}

.item {
  display: list-item;
  
  &::marker {
    content: "🌵";
  }
}

supports.css

/* если браузер поддерживает свойство, его можно применить */
@supports (display: grid) {
  .main {
    display: grid;
  }
}

text.css

.card {
  /* оптимизированный перенос текста */
  text-wrap: balance;
}

/* задаёт стиль для первой буквы абзаца где 3.5 - размер буквы, а 4 - количество строк, которое она будет занимать */
.card:first-letter {
  initial-letter: 3.5 4;
}

.card {
  /* в случае когда основной шрифт ещё не загрузился, будет применён fallback вместо дефолтного из браузера */
  font-display: fallback;
}

/* обрезать текст по количеству строк и добавить в конец троеточие */
.card {
  display: -webkit-box;
  -webkit-line-clamp: 3
  -vebkit-box-orient: vertical;
  overflow: hidden;
}

transformations.css

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
  
  &:hover {
    /* теперь можно не переопределять вообще все стили трансформации */
    scale: 2;
  }
}

visibility.css

/*
 * dispay: none; удаляет элемент со страницы и при повторной активации заново его отрисовывает.
 *               поэтому возможны визуальные баги в этом процессе.
 *
 * content-visibility физически не удаляет блок и при активации отображает на странице уже отрендеренный объект.
 */
.item {
  content-visibility: auto;
  content-visibility: hidden;
}