Interactivity
Cursor, pointer events, selection, resizing, touch, form accents, scrolling and scroll snap.
Scroll snap carousel#
<div nib="d=flex; g=10px; w=300px; ovfx=auto; scrst=x mandatory; pb=8px">
<div nib="fls=0; w=220px; h=90px; bdrd=12px; bgc=#4F52D9; scrsb=start"></div>
<div nib="fls=0; w=220px; h=90px; bdrd=12px; bgc=#0891b2; scrsb=start"></div>
<div nib="fls=0; w=220px; h=90px; bdrd=12px; bgc=#16a34a; scrsb=start"></div>
</div>Form accents#
<label nib="d=flex; ali=center; g=8px; acc=#16a34a; cur=pointer"><input type="checkbox" checked> Accent colour</label>Useful combinations#
Goal | Rules |
|---|---|
smooth in-page scrolling |
|
keep headings visible below a sticky header |
|
disable clicks on a decorative overlay |
|
prevent text selection on a control |
|
stable layout when scrollbars appear |
|
thin, themed scrollbars |
|
All interactivity shorthands#
Shorthand | CSS property |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|