Warning: mkdir(): No space left on device in /var/www/hottg/post.php on line 59

Warning: file_put_contents(aCache/aDaily/2025-07-22/post/junior_developer/--): Failed to open stream: No such file or directory in /var/www/hottg/post.php on line 72
#css #update #frontend @Frontend
TG Telegram Group & Channel
Frontend | United States America (US)
Create: Update:

#css #update #frontend


🆕 👩‍💻 2024 yilda CSSga bir qator yangi xususiyatlar qo'shildi

Yangilanishlar veb dastruchilarga interaktiv foydalanuvchi interfeyslarini yaratishda yordam beradi. Quyida ushbu yangi xususiyatlarning ba'zilari va ularning kod misollari keltirilgan:

📄 Maydon o'lchami (field-sizing)
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.


🔴 height: auto ga animatsiya qo'llash
interpolate-size xususiyati yordamida height: auto yoki boshqa kalit so'zlarga animatsiyalarni amalga oshirish mumkin.

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


🖋 <details> elementlari
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> elementlarini uslublash
<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;
}
```


🔃 Anchorga asoslangan joylashuv
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;
}
```


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

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


🖼 Skrollga asoslangan animatsiyalar
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
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);
}
```


Boshqa yangilanishlar haqida misollar orqali tanishib chiqish

@frontend | Happy Coding

#css #update #frontend


🆕 👩‍💻 2024 yilda CSSga bir qator yangi xususiyatlar qo'shildi

Yangilanishlar veb dastruchilarga interaktiv foydalanuvchi interfeyslarini yaratishda yordam beradi. Quyida ushbu yangi xususiyatlarning ba'zilari va ularning kod misollari keltirilgan:

📄 Maydon o'lchami (field-sizing)
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.


🔴 height: auto ga animatsiya qo'llash
interpolate-size xususiyati yordamida height: auto yoki boshqa kalit so'zlarga animatsiyalarni amalga oshirish mumkin.

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


🖋 <details> elementlari
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> elementlarini uslublash
<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;
}
```


🔃 Anchorga asoslangan joylashuv
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;
}
```


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

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


🖼 Skrollga asoslangan animatsiyalar
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
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);
}
```


Boshqa yangilanishlar haqida misollar orqali tanishib chiqish

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14👍9


>>Click here to continue<<

Frontend






Share with your best friend
VIEW MORE

United States America Popular Telegram Group (US)


Warning: Undefined array key 3 in /var/www/hottg/function.php on line 115

Fatal error: Uncaught mysqli_sql_exception: Too many connections in /var/www/db.php:16 Stack trace: #0 /var/www/db.php(16): mysqli_connect() #1 /var/www/hottg/function.php(212): db() #2 /var/www/hottg/function.php(115): select() #3 /var/www/hottg/post.php(351): daCache() #4 /var/www/hottg/route.php(63): include_once('...') #5 {main} thrown in /var/www/db.php on line 16