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

[CSS-UI-4] Clarify which element caret properties come from #11119

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

[CSS-UI-4] Clarify which element caret properties come from #11119

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d615f22
Clarify which element caret properties come from
schenney-chromium Oct 30, 2024
1eb5d9f
Merge branch 'w3c:main' into main
schenney-chromium Nov 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 13 additions & 11 deletions css-ui-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1079,6 +1079,18 @@ Cursor of the canvas</h5>
<h3 id="insertion-caret">
Insertion caret</h3>

The caret is a visible indicator of the insertion point in an element where text (and potentially other content) is inserted by the user. The properties here control the caret when within the <a href="https://w3c.github.io/contentEditable/#dfn-editing-host">editing host</a> element or <a spec=html>mutable</a> form control, such as <{textarea}>.

Note: UAs might have additional things that count as “carets”.
For example, some UAs can show a “navigation caret”,
which acts similarly to an insertion caret
but can be moved around in non-editable text
and is functionally a caret.
On the other hand, the cursor image shown
when hovering over text when the 'cursor' property is ''cursor/auto'',
or when hovering over an element where the 'cursor' property is ''cursor/text'' or ''cursor/vertical-text'',
though it sometimes resembles a caret, is not a caret (it's a cursor).

<h4 id="caret-color" caniuse="css-caret-color">
Coloring the Insertion Caret: the 'caret-color' property</h4>

Expand Down Expand Up @@ -1111,17 +1123,7 @@ Coloring the Insertion Caret: the 'caret-color' property</h4>
The insertion caret is colored with the specified color.
</dl>

The caret is a visible indicator of the insertion point in an element where text (and potentially other content) is inserted by the user. This property controls the color of that visible indicator.

Note: UAs might have additional things that count as “carets”.
For example, some UAs can show a “navigation caret”,
which acts similarly to an insertion caret
but can be moved around in non-editable text
and is functionally a caret.
On the other hand, the cursor image shown
when hovering over text when the 'cursor' property is ''cursor/auto'',
or when hovering over an element where the 'cursor' property is ''cursor/text'' or ''cursor/vertical-text'',
though it sometimes resembles a caret, is not a caret (it's a cursor).
This property controls the color of the caret.

<div class="example">
Example: a textarea with
Expand Down