Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Добавляет статью про Container Queries #5543

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Добавляет статью про Container Queries #5543

wants to merge 6 commits into from

Conversation

kazakov-al
Copy link
Contributor

@kazakov-al kazakov-al commented Nov 3, 2024 •
edited
Loading

Описание

Добавляет статью про выражения от контейнера

Closes #3615

@kazakov-al kazakov-al requested a review from solarrust as a code owner November 3, 2024 17:49
@github-actions github-actions bot added css Контент по CSS статья Расширенный материал labels Nov 3, 2024
@kazakov-al
Copy link
Contributor Author

Чет мне кажется я с "блин, короче" даже слегка переборщил :D

solarrust
solarrust reviewed Nov 15, 2024
View reviewed changes
Copy link
Member

@solarrust solarrust left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Привет!
Как же я рада этому пиару и этому материалу. Прости, что затянула с ревью. Пока только предложила изменения в мете. Скоро вернусь и прочитаю подробнее =)
Давай добавим демки?

@TatianaFokina TatianaFokina changed the title feat: add article container queries Добавляет статью про Container Queries Nov 15, 2024
@kazakov-al
Copy link
Contributor Author

kazakov-al commented Nov 16, 2024 •
edited
Loading

Привет! Как же я рада этому пиару и этому материалу. Прости, что затянула с ревью. Пока только предложила изменения в мете. Скоро вернусь и прочитаю подробнее =) Давай добавим демки?

Прив, та все супер, ревьюй в удобном темпе :) Я тоже затянул с пиаром тк в запаре :D

  • А какие именно демки?
  • Если у тебя есть идейки, я не против слегка структурку подвигать, аля разделить на смысловые секции или еще чего

@skorobaeus
Copy link
Member

  • А какие именно демки?

Привет! Я думаю, было бы хорошо добавить две демки, которые ответили бы на такие вопросы:

  1. В каких случаях container queries удобнее медиазапросов?
  2. Бывают ли случаи, когда медиазапросы и вовсе особо неприменимы, зато здорово помогут выражения от контейнера?

В первом случае мне приходит на ум вёрстка страницы с закрывающейся боковой панелью, где в основной секции контент должен перестраиваться. При вёрстке на медиазапросах придётся заморачиваться и вычитать из ширины страницы ширину боковой колонки, чтобы прикинуть, сколько места у нас есть, бла-бла-бла, а выражения от контейнера сразу нам сообщают, сколько у нас места. Код короче и проще, PROFIT.

Во втором случае можно сверстать элемент, размеры которого подконтрольны пользователю и никак не зависят от размера окна. Такой пример нашла: https://codepen.io/shadeed/pen/VwPQORy?editors=0100

@skorobaeus skorobaeus self-requested a review December 11, 2024 11:21
@kazakov-al
Copy link
Contributor Author

kazakov-al commented Feb 3, 2025 •
edited
Loading

  • А какие именно демки?

Привет! Я думаю, было бы хорошо добавить две демки, которые ответили бы на такие вопросы:

  1. В каких случаях container queries удобнее медиазапросов?
  2. Бывают ли случаи, когда медиазапросы и вовсе особо неприменимы, зато здорово помогут выражения от контейнера?

В первом случае мне приходит на ум вёрстка страницы с закрывающейся боковой панелью, где в основной секции контент должен перестраиваться. При вёрстке на медиазапросах придётся заморачиваться и вычитать из ширины страницы ширину боковой колонки, чтобы прикинуть, сколько места у нас есть, бла-бла-бла, а выражения от контейнера сразу нам сообщают, сколько у нас места. Код короче и проще, PROFIT.

Во втором случае можно сверстать элемент, размеры которого подконтрольны пользователю и никак не зависят от размера окна. Такой пример нашла: https://codepen.io/shadeed/pen/VwPQORy?editors=0100

Прив, на первый взгляд вопросы выглядят как синонимы, давай одной демкой попробуем покрыть.

Первый вариант мне кажется противоречивым, тк будет прыгать контент, юзеры подобное не любят, не хотелось бы антипаттерн в качестве примера приводить. Но сама идея класс, надо подумать как иначе обыграть

Второй вариант, к сожалению, не особо подходит под эти пункты, тк взаимозаменяем медиа (

Тут еще джош вкатил статейку недавно, гляну в конце недели. мб там смогу подбрить идею https://www.joshwcomeau.com/css/container-queries-unleashed/

@skorobaeus
Copy link
Member

  • А какие именно демки?

Привет! Я думаю, было бы хорошо добавить две демки, которые ответили бы на такие вопросы:

  1. В каких случаях container queries удобнее медиазапросов?
  2. Бывают ли случаи, когда медиазапросы и вовсе особо неприменимы, зато здорово помогут выражения от контейнера?

В первом случае мне приходит на ум вёрстка страницы с закрывающейся боковой панелью, где в основной секции контент должен перестраиваться. При вёрстке на медиазапросах придётся заморачиваться и вычитать из ширины страницы ширину боковой колонки, чтобы прикинуть, сколько места у нас есть, бла-бла-бла, а выражения от контейнера сразу нам сообщают, сколько у нас места. Код короче и проще, PROFIT.
Во втором случае можно сверстать элемент, размеры которого подконтрольны пользователю и никак не зависят от размера окна. Такой пример нашла: https://codepen.io/shadeed/pen/VwPQORy?editors=0100

Прив, на первый взгляд вопросы выглядят как синонимы, давай одной демкой попробуем покрыть.

Первый вариант мне кажется противоречивым, тк будет прыгать контент, юзеры подобное не любят, не хотелось бы антипаттерн в качестве примера приводить. Но сама идея класс, надо подумать как иначе обыграть

Второй вариант, к сожалению, не особо подходит под эти пункты, тк взаимозаменяем медиа (

Тут еще джош вкатил статейку недавно, гляну в конце недели. мб там смогу подбрить идею https://www.joshwcomeau.com/css/container-queries-unleashed/

Ап ту ю, моё дело — предложить :)

Inventoris
Inventoris requested changes Feb 11, 2025
View reviewed changes
Copy link
Member

@Inventoris Inventoris left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Привет Лёша! Классно, что решил написать такой полезный материал, его сильно не хватало 👍

Я оставил несколько комментов, посмотри пожалуйста. Ещё у нас нет ни одного заголовка, давай подведём доку к шаблону для начала.

Ещё, конечно, очень хочется демку! Пользователям будет здорово посмотреть на работу запросов к контейнеру в действии (тут твой полёт творчества).

После набегу ещё вычитать текст и посмотреть код 🌟

css/container-queries/index.md
@@ -0,0 +1,133 @@
---
title: "Руководство по выражениям от контейнера"
description:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Нужно добавить description.

css/container-queries/index.md
authors:
- kazakov-al
related:
-
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Здесь просятся три рекомендации) Я бы как минимум добавил что-нибудь из директив, вроде @media, а дальше на твой авторский взгляд.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Для себя)

@media
Единицы измерения
Mobile-first vs Desktop-first

css/container-queries/index.md
@@ -0,0 +1,133 @@
---
title: "Руководство по выражениям от контейнера"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Как смотришь на то, чтобы переименовать тут из руководства в доку про директиву @container и поместить её в раздел "Директивы"?

Copy link
Contributor Author

@kazakov-al kazakov-al Feb 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Нейтрально :) Тут не только про директиву, тут еще и про: новые единицы измерения и свойства связанны с контейнерами. Крч, не атомарное, а что-то общее.

Copy link
Contributor Author

@kazakov-al kazakov-al Feb 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Крч, как посчитаете нужным - так и впишем. Решать вам)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@solarrust что скажешь?)

@solarrust
Copy link
Member

@kazakov-al френдли ремайндер по этому пиару =)

@kazakov-al @Inventoris
Update css/container-queries/index.md
be21911 
Co-authored-by: Alexey Nikitchenko <[email protected]>
@github-actions github-actions bot added the дока Справочный материал label Feb 20, 2025
@github-actions GitHub Actions
Copy link

Превью контента из be21911 опубликовано.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@solarrust solarrust solarrust left review comments

@Inventoris Inventoris Inventoris requested changes

@skorobaeus skorobaeus Awaiting requested review from skorobaeus

Requested changes must be addressed to merge this pull request.

Assignees

@kazakov-al kazakov-al

Labels
css Контент по CSS дока Справочный материал статья Расширенный материал
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Статья про Container Queries
4 participants
@kazakov-al @skorobaeus @solarrust @Inventoris