We can anchor one element to another. We can also attach one element to multiple anchors. In this experiment, Ryan riffs on those ideas and comes up with a new way to transition between two anchors and the result is a practical use case that would normally require JavaScript.
Powered by
DigitalOcean
What’s it look like to create a dashboard within the WordPress admin for analyzing Google Analytics data across 900 blogs across 25 multisite instances? It involves designing a user-friendly interface, leveraging the WordPress REST API, implementing a plugin for data retrieval, and addressing challenges like rate limits and authentication.
Adam Argyle wraps up the search for a CSS logo, check out CSS’ new look!
Most images require description for clarity, there are exceptions. This set of notes looks at different situations and contexts where alt text may not be needed and what to do in those cases.
Donut scoping addresses the challenge of preventing parent styles from leaking to nested content. Originating from a 2011 concept by Nicole Sullivan, the issue has evolved, culminating in 2024’s @scope at-rule. This allows for more precise CSS styling, safeguarding content from unwanted inheritance while managing global CSS complexities.
@scope (.container) to (.article) { /* */ }
.element { anchor-scope: --anchor-one, --anchor-two; }
.element { width: random(5rem, 25rem, by 5rem); }
@layer reset, utilities, components, pages;
@property --spacing {
syntax: "";
initial-value: 20px;
inherits: true;
}
@supports selector(:nth-child(1 of .foo)) { }
@container (width > 600px) {}
.element { animation: pulse 5s infinite; }
@position-try --my-position { position-area: top left; }
.target { top: anchor(--my-anchor bottom); }
.target { width: anchor-size(width); }
.target { position-visibility: no-overflow; }
.target { position-try-fallbacks: flip-inline, bottom left; }
.element { position-try-order: most-width; }
form:valid { outline: 3px dashed green; }
form:invalid { outline: 3px dashed red; }