Добавляет доки про CSS Anchor Positioning, часть 5 #5931
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
akhmadullin
requested review from
Inventoris,
skorobaeus and
solarrust
as code owners
akhmadullin
force-pushed
the
doka/css-anchor-positioning-5
branch
from
0c1d80a to
f2d3101
Compare
akhmadullin
force-pushed
the
doka/css-anchor-positioning-5
branch
from
f2d3101 to
8b033de
Compare
Превью контента из 8e9b894 опубликовано. |
vitya-ne
reviewed
Dec 30, 2025
|
|
||
|  | ||
|
|
||
| Лучше понять, какое значение прописать для свойства `position-area`, чтобы расположить его в нужном месте поможет интерективная демка ниже. В ней можно кликать на любую из ячеек, чтобы выбрать одну ячейку. Также можно зажать и тянуть, чтобы выбрать несколько ячеек. |
Contributor
There was a problem hiding this comment.
Suggested change
| Лучше понять, какое значение прописать для свойства `position-area`, чтобы расположить его в нужном месте поможет интерективная демка ниже. В ней можно кликать на любую из ячеек, чтобы выбрать одну ячейку. Также можно зажать и тянуть, чтобы выбрать несколько ячеек. | |
| Лучше понять, какое значение прописать для свойства `position-area`, чтобы расположить его в нужном месте поможет интерактивная демка ниже. В ней можно кликать на любую из ячеек, чтобы выбрать одну ячейку. Также можно зажать и тянуть, чтобы выбрать несколько ячеек. |
vitya-ne
reviewed
Dec 30, 2025
|
|
||
| Лучше понять, какое значение прописать для свойства `position-area`, чтобы расположить его в нужном месте поможет интерективная демка ниже. В ней можно кликать на любую из ячеек, чтобы выбрать одну ячейку. Также можно зажать и тянуть, чтобы выбрать несколько ячеек. | ||
|
|
||
| <iframe title="Интерактивная демка, показывающася работу position-area" src="demos/position-area/" height="500"></iframe> |
Contributor
There was a problem hiding this comment.
По-моему, было бы здорово отразить в заговке суть демки избежав "Интерактивная демка, показывающая.."
Suggested change
| <iframe title="Интерактивная демка, показывающася работу position-area" src="demos/position-area/" height="500"></iframe> | |
| <iframe title="Интерактивная демка, показывающая работу position-area" src="demos/position-area/" height="500"></iframe> |
vitya-ne
reviewed
Dec 30, 2025
| - `flip-block` – элемент будет менять свое расположение в блочном направлении; | ||
| - `flip-inline` – элемент будет менять свое расположение в строчном направлении; | ||
| - `flip-start` – элемент будет менять ось расположения: если он находился в начале одной оси, то он переместится в начало противоположной оси; если элемент находился в конце одной оси, то он переместится в конец противоположной оси; | ||
| - `<position-area>` – альтернативное расположение, заданое с помощью значения для свойства [`position-area`](#position-area); |
Contributor
There was a problem hiding this comment.
Suggested change
| - `<position-area>` – альтернативное расположение, заданое с помощью значения для свойства [`position-area`](#position-area); | |
| - `<position-area>` – альтернативное расположение, заданное с помощью значения для свойства [`position-area`](#position-area); |
vitya-ne
reviewed
Dec 30, 2025
| } | ||
| ``` | ||
|
|
||
| Попробуйте в демке ниже перетащить якорь к рамзным границам экрана. |
Contributor
There was a problem hiding this comment.
Suggested change
| Попробуйте в демке ниже перетащить якорь к рамзным границам экрана. | |
| Попробуйте в демке ниже перетащить якорь к разным границам экрана. |
vitya-ne
reviewed
Dec 30, 2025
|
|
||
| Свойство `anchor-scope` ограничивает область применения указанных якорных имён поддеревом текущего элемента. За счёт этого можно использовать одно и то же якорное имя на разных элементах, например, в списках. | ||
|
|
||
| <iframe title="Показываем работу свойсва anchor-scope" src="demos/anchor-scope/" height="500"></iframe> |
Contributor
There was a problem hiding this comment.
Suggested change
| <iframe title="Показываем работу свойсва anchor-scope" src="demos/anchor-scope/" height="500"></iframe> | |
| <iframe title="Показываем работу свойства anchor-scope" src="demos/anchor-scope/" height="500"></iframe> |
vitya-ne
approved these changes
Dec 30, 2025
Contributor
vitya-ne
left a comment
vitya-ne
left a comment
There was a problem hiding this comment.
Огромное спасибо за гайд!
Поправь, пожалуйста несколько опечаток.
Я уже писал, но повторюсь, сорри, мне кажется, в заголовках демок лучше кратко описывать их цель и постораться избежать слов "демка, показывающая"
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Описание
Добавляет гайд (вводную статью) про Anchor Positioning.
Это пятый и последний PR, закрывающий #5884.
Превью - https://content-5931.dev.doka.guide/css/anchor-positioning-guide/
Чек-лист
/css/color/,/tools/json/,/tools/gulp/#kak-ponyat)images/example.png,demos/example/,../demos/example/)