Telegram Group & Telegram Channel
Контейнерные запросы (Container Queries) — это инструмент в CSS, который позволяет стилизовать элементы на основе размеров их родительского контейнера, а не всего окна браузера. В Chrome 133 появилась новая фича — scroll states для контейнерных запросов, которая добавляет ещё больше контроля над поведением элементов.

Что такое Scroll States?

scrollable, stuck и snapped - это новые условия свойства scroll-state, которые можно использовать внутри @container, чтобы применять стили в зависимости от состояния прокрутки контейнера:


Пример:

.stuck-top {
container-type: scroll-state;
position: sticky;
top: 0px;

> nav {
@container scroll-state(stuck: top) {
background: _Highlight;
color: _HighlightText;
}
}
}


Где это можно использовать?

- Индикация прокрутки — визуально показывать, что есть ещё контент ниже
- "Липкие" заголовки — автоматически делать заголовки sticky при прокрутке
- Изменение навигации — например, показывать кнопку "Наверх" при прокрутке
- Оптимизация интерфейса — скрывать второстепенные элементы при прокрутке

Документация

#chrome #css



tg-me.com/vuefaq/1267
Create:
Last Update:

Контейнерные запросы (Container Queries) — это инструмент в CSS, который позволяет стилизовать элементы на основе размеров их родительского контейнера, а не всего окна браузера. В Chrome 133 появилась новая фича — scroll states для контейнерных запросов, которая добавляет ещё больше контроля над поведением элементов.

Что такое Scroll States?

scrollable, stuck и snapped - это новые условия свойства scroll-state, которые можно использовать внутри @container, чтобы применять стили в зависимости от состояния прокрутки контейнера:


Пример:

.stuck-top {
container-type: scroll-state;
position: sticky;
top: 0px;

> nav {
@container scroll-state(stuck: top) {
background: _Highlight;
color: _HighlightText;
}
}
}


Где это можно использовать?

- Индикация прокрутки — визуально показывать, что есть ещё контент ниже
- "Липкие" заголовки — автоматически делать заголовки sticky при прокрутке
- Изменение навигации — например, показывать кнопку "Наверх" при прокрутке
- Оптимизация интерфейса — скрывать второстепенные элементы при прокрутке

Документация

#chrome #css

BY Vue-FAQ


Warning: Undefined variable $i in /var/www/tg-me/post.php on line 283

Share with your friend now:
tg-me.com/vuefaq/1267

View MORE
Open in Telegram


telegram Telegram | DID YOU KNOW?

Date: |

What is Telegram?

Telegram’s stand out feature is its encryption scheme that keeps messages and media secure in transit. The scheme is known as MTProto and is based on 256-bit AES encryption, RSA encryption, and Diffie-Hellman key exchange. The result of this complicated and technical-sounding jargon? A messaging service that claims to keep your data safe.Why do we say claims? When dealing with security, you always want to leave room for scrutiny, and a few cryptography experts have criticized the system. Overall, any level of encryption is better than none, but a level of discretion should always be observed with any online connected system, even Telegram.

Telegram Auto-Delete Messages in Any Chat

Some messages aren’t supposed to last forever. There are some Telegram groups and conversations where it’s best if messages are automatically deleted in a day or a week. Here’s how to auto-delete messages in any Telegram chat. You can enable the auto-delete feature on a per-chat basis. It works for both one-on-one conversations and group chats. Previously, you needed to use the Secret Chat feature to automatically delete messages after a set time. At the time of writing, you can choose to automatically delete messages after a day or a week. Telegram starts the timer once they are sent, not after they are read. This won’t affect the messages that were sent before enabling the feature.

telegram from ye


Telegram Vue-FAQ
FROM USA