#css #frontend

<div class="container">
    <div class="centered-div">Markazlangan kontent</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    display: grid;
    place-items: center;
    height: 100vh;
}

.container {
    position: relative;
    height: 100vh;
}
.centered-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// Gorizontal markazlash uchun, margin: auto
.centered-div {
    width: 50%;
    margin: 0 auto;
}

// Inline yoki inline-block elementlari uchun
.container {
    text-align: center;
    line-height: 100vh;
}
.centered-div {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

#css #frontend

#css #frontend

@media (width >= 80rem) {
    /* kenglik kamida 80rem bo'lganda */
}

/* Oraliq belgilash */
@media (80rem <= width <= 120rem) {
    /* kenglik 80rem va 120rem oralig'ida bo'lganda */
}

#plugin #css #frontend

#css #frontend

li:has(a:is(:hover, :focus-visible)) {anchor-name: --a;}
ul::before {
  left: anchor(--a left);
  width: anchor-size(--a width);
}

CSS Anchor Positioning — bu CSS-ning yangi imkoniyatlaridan biri bo‘lib, elementlarning joylashuvini boshqa elementlarga bog‘lashga yordam beradi.

#css #update #frontend

Matn kiritish maydonlarini matnning hajmiga qarab avtomatik ravishda o'lchash uchun field-sizing xususiyati qo'shildi.

```
textarea, select, input {
field-sizing: content;
}
```
Bu usul har qanday shrift, shrift o'lchami, til
va yozuv uslubi uchun mos.

interpolate-size xususiyati yordamida height: auto yoki boshqa kalit so'zlarga animatsiyalarni amalga oshirish mumkin.

```
:root {
interpolate-size: allow-keywords;
}
```

Bir nechta <details> elementlarini guruhlab, ularni o'zaro eksklyuziv qilish uchun name atributidan foydalanish mumkin.

```
<details name="learn-css">
<summary>CSSni o'rganish</summary>
<p>...</p>
</details>
<details name="learn-css">
<summary>Box Model</summary>
<p>...</p>
</details>
```
Bu usulda bir <details> elementi ochilganda, boshqa ochiq bo'lgan <details> elementi avtomatik ravishda yopiladi.

<details> va <summary> elementlariga display xususiyatini qo'llash va kengayib-yopiladigan qismni uslublash uchun ::details-content psevdosini ishlatish mumkin.

```
details {
display: flex;
flex-direction: row;
}
```

Elementlarni bir-biriga nisbatan joylashtirish uchun anchor asoslangan position joriy etildi.

```
.anchor {
anchor-name: --over-easy;
}

.positioned-element {
position: fixed;
position-anchor: --over-easy;
position-area: block-end;
}
```

Bu usul yordamida bir sahifadan boshqasiga o'tishda silliq o'tish effektlarini qo'shish osonlashadi.

```
@view-transition {
navigation: auto;
}
```

Skroll pozitsiyasiga bog'liq animatsiyalarni yaratish uchun skrollga asoslangan animatsiyalar API joriy etildi.

```
@keyframes appear {
from {
opacity: 0;
scale: 0.8;
}
to {
opacity: 1;
scale: 1;
}
}

img {
animation: appear linear;
animation-timeline: view();
animation-range: entry 25% cover 50%;
}
```

💳 Skroll snap hodisalari
Usul yordamida skroll paytida foydalanuvchi interfeysining aniq joylariga o'tishni boshqarish osonlashadi.

```
scroller.addEventListener('scrollsnapchange', event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
});
```

light-dark() funksiyasi yordamida yorug'lik va qorong'ilik rejimlariga mos ranglarni belgilash mumkin.

```
:root {
color-scheme: light dark;
--primary-color: light-dark(#333, #fafafa);
--primary-background: light-dark(#e4e4e4, #121212);
--highlight-color: light-dark(hotpink, lime);
}
```

#animation #js #css #frontend

#css #flexbox #frontend

#css #frontend

#css #frontend

#animation #css #frontend

#html #css #frontend

#css #tools #frontend

#trend #css #frontend

#css #ux #frontend

button[aria-label="Next slide"] {
  cursor: url(chev-right.png), auto;
}

button[aria-label="Previous slide"] {
  cursor: url(chev-left.png), auto;
}