awesome-html-css
Resources on the super power of HTML and CSS.
https://github.com/zedix/awesome-html-css
Last synced: 2 days ago
JSON representation
-
Uncategorized
-
HTML
-
The `commandfor` & `command` attributes (Invoker Commands)
- Invokers Proposal
- 2024-07-15 — An update on invokers: Invoker commands in HTML
- 2024-03-24 — I love invokers and you should too
- Explainer
- Can I use HTML attribute: invokeaction
- Intent to Prototype: Invokers (Chrome)
- Ship Invokers proposal to all major browsers (Nov 2023)
- 2024-03-24 — I love invokers and you should too
- Full list of built-in commands
- Can I use HTML attribute: invokeaction
- Intent to Prototype: Invokers (Chrome)
- Ship Invokers proposal to all major browsers (Nov 2023)
- 2024-07-15 — An update on invokers: Invoker commands in HTML
-
The `switch` attribute
-
The `<dialog>` element
- 2022-02-08 — Replace JavaScript Dialogs With the New HTML Dialog Element
- Bikeshed a name for "light dismiss for dialog"
- Consider preventing page scroll when modal dialog is visible
- Entry/Exit <dialog> animation 2024
- 2023-01-26 — Use the dialog element (reasonably)
- 2022-04-13 — Building a dialog component
- 2022-03-08 — A look at the dialog element's super powers
- Consider preventing page scroll when modal dialog is visible
- Entry/Exit <dialog> animation 2024
- 2023-01-26 — Use the dialog element (reasonably)
- 2022-04-13 — Building a dialog component
- 2022-03-08 — A look at the dialog element's super powers
- 2022-02-08 — Replace JavaScript Dialogs With the New HTML Dialog Element
- (Invokers Proposal) Add InvokeElement & InvokeEvent IDLs & invocation steps for Dialog & Popover
- Bikeshed a name for "light dismiss for dialog"
-
The `<details>` element
- Real-World sidebar build with `<dialog>`/`<details`>
- 2024-07-08 — Comeau tweet on `<details>`: "🔥 It feels like magic"
- 2024-07-15 — Animated exclusive accordions with CSS
- 2024-09-25 — Open & Close Transitions with `<details>`
- #9951 — ::details-content vs details::part(content) - Exposing the shadow tree could lead to UAs being restricted in how they can change the component in the future
- #9879 — Improve styling of `<details>`/`<summary>` elements
- Real-World sidebar build with `<dialog>`/`<details`>
- 2024-07-08 — Comeau tweet on `<details>`: "🔥 It feels like magic"
- 2024-07-15 — Animated exclusive accordions with CSS
- 2024-09-25 — Open & Close Transitions with `<details>`
- #9951 — ::details-content vs details::part(content) - Exposing the shadow tree could lead to UAs being restricted in how they can change the component in the future
- #9879 — Improve styling of `<details>`/`<summary>` elements
-
The `popover` attribute
- Entry/exit animation code (1)
- Entry/exit animation code (2)
- Living Standard
- Popover API Demo
- 2024 Dropdown Menu with Popover and Anchor Pos (Floating UI fallback)
- 2024-03-21 — On popover accessibility: what the browser does and doesn’t do
- 2024-03-04 — The Popover API, invokers, anchor positioning and @starting-style ✨
- Popover API Demo
- 2024 Dropdown Menu with Popover and Anchor Pos (Floating UI fallback)
- 2024-03-21 — On popover accessibility: what the browser does and doesn’t do
- 2024-03-04 — The Popover API, invokers, anchor positioning and @starting-style ✨
- Entry/exit animation code (1)
- Entry/exit animation code (2)
- Living Standard
-
The `focusgroup` attribute
-
The `CloseWatcher` API
-
The `Customizable <select>` (ex `<selectlist>` ⇢ ex `<selectmenu>` ⇢ ex `<select> v2`)
- 2023-06-01 — Advanced Form Control Styling With Selectmenu And Anchoring API
- 2023-07-25 — Demo examples
- 2024-09-19 — Custom `<select>` boilerplate + transitions
- WHATWG Stage 1: Stylable `<select>` element
- Open UI's issues
- Open UI's `<selectlist>` demos
- 2023-06-01 — Advanced Form Control Styling With Selectmenu And Anchoring API
- 2023-07-25 — Demo examples
- 2024-09-19 — Custom `<select>` boilerplate + transitions
- WHATWG Stage 1: Stylable `<select>` element
- Open UI's design decisions
- Open UI's issues
- Open UI's `<selectlist>` demos
-
All HTML elements (115)
-
Appendix: all HTML elements (115)
- `<details>` - elements.html#the-dialog-element)
- `<search>`
-
-
Resources
-
HTML over the wire (instead of JSON)
- Write better CSS with modern CSS
- The latest in Web UI (Google I/O ‘24)
- Adam Argyle blog
- 2024-08-08 — Transition to `height: auto` & `display: none` Using Pure CSS
- 12 Days of Web
- 2024-02-01 — Interop 2024 Dashboard
- 2023-12-31 — CSS Wrapped 2023
- News to the web platform
- Better, Faster, Stronger Web UI
- Modern CSS patterns in Campfire
- 2024-12-21 — Re-imagine the web
- 2025-03-19 — Minding the gaps: A new way to draw separators in CSS
- CSS Tips
- A standards first web framework
- 2025-01-21 — attr() is getting an upgrade
- 2024-12-31 — New Front-End Features In 2025
- 2024-12-31 — CSS Wrapped 2024
-
CSS Tips
-
-
Following
-
All HTML elements (115)
- `<details>` - elements.html#the-dialog-element)
- `<search>`
- `<selectedcontent>`
-
HTML over the wire (instead of JSON)
-
CSS
-
CSS `subgrid`
-
CSS Style Queries
- Container Style Query Explainer
- CSS Style Queries Use Cases
- CSS Style Container Queries (custom properties) #828
- #10744 Allow applying style rules to the container itself
- Container Style Query Explainer
- CSS Style Queries Use Cases
- CSS Style Container Queries (custom properties) #828
- #10744 Allow applying style rules to the container itself
-
CSS `color-mix()`
-
CSS `if()` notation (inline conditionals on custom properties / self-styling feature)
-
CSS Custom Functions & Mixins
-
CSS Anchor Position API
- 2021-03-06 — First Proposal by Melanie Richards (Microsoft)
- 2021-03-06 — First Proposal by Melanie Richards (Microsoft)
- 2023-03-15 — Future CSS: Anchor Positioning
- 2023-06-29 — First Working Draft
- 2023-12-14 — Anchor Positioning ⭐
- 2024-02-09 — Editor’s Draft
- 2024-04-12 — Chromium Intent to Ship: CSS Anchor Positioning
- Una's anchor-tool
- Una's bunch of demos
- `inset-area` demo exploration
- csswg-drafts > css-anchor-position-1
- Tracking bug for implementation of Anchor Positioning feature
- Mozilla tracking bug
- Explainer: CSS Anchor Positioning
- #9663 Better handle an inset-area edge case
- WebKit Position
- Mozilla Position
- Tether elements to each other with CSS anchor positioning
- code
- 3 lines of CSS to make your tooltips/menus stay in view 🤯
- 2023-03-15 — Future CSS: Anchor Positioning
- 2023-06-29 — First Working Draft
- 2023-12-14 — Anchor Positioning ⭐
- 2024-02-09 — Editor’s Draft
- 2024-04-12 — Chromium Intent to Ship: CSS Anchor Positioning
-
-
CSS Scroll-Driven Animations (`view-timeline`, `animation-timeline`, `view()`)
-
CSS Custom Highlight API
-
CSS Anchor Position API
-
-
CSS Handy (Old) Things
Programming Languages
Categories
Sub Categories
CSS Anchor Position API
31
HTML over the wire (instead of JSON)
27
The `<dialog>` element
15
The `popover` attribute
14
The `commandfor` & `command` attributes (Invoker Commands)
13
The `Customizable <select>` (ex `<selectlist>` ⇢ ex `<selectmenu>` ⇢ ex `<select> v2`)
13
The `<details>` element
12
CSS Custom Functions & Mixins
11
The `switch` attribute
11
CSS Style Queries
8
Uncategorized
6
The `focusgroup` attribute
6
All HTML elements (115)
4
CSS `subgrid`
4
CSS `if()` notation (inline conditionals on custom properties / self-styling feature)
4
The `CloseWatcher` API
4
CSS Tips
3
Appendix: all HTML elements (115)
2
CSS `color-mix()`
2