CSS-Tricks·2yCSS Olympic Rings
The post showcases a modern approach to creating animated 3D Olympic rings using vanilla CSS, focusing on efficiency, readability, and leveraging modern CSS features like trigonometric functions and relative color syntax. The project involves using layers, custom properties, and transforms to create the ring shapes and their animations, demonstrating the power and flexibility of current CSS standards.
CSS-Tricks·2yThe “Other” C in CSS
Sara Soueidan's presentation at CSS Day 2024 emphasizes how CSS impacts accessibility beyond visual appearances. She covers the accessibility tree (accTree), the implications of CSS properties like `display: contents`, and the importance of proper element naming. Additionally, Sara discusses visually hiding elements and the pitfalls of using CSS-generated content for meaningful information. The presentation offers practical advice on ensuring accessible, user-friendly web designs.
CSS-Tricks·2yHTML Web Components Make Progressive Enhancement and CSS Encapsulation Easier!
HTML Web Components facilitate progressive enhancement and CSS encapsulation, allowing for modular, reusable elements without relying solely on JavaScript. They provide custom elements, encapsulate styles, and support accessibility features, ensuring components function with or without JavaScript. Examples include a disclosure pattern, tabbed components, and an AJAX loader, demonstrating how components can be enhanced progressively using both light and Shadow DOM.
CSS-Tricks·2y“Smart” Layouts With Container Queries
Modern CSS introduces container queries, revolutionizing how we approach responsive web design by addressing the limitations of media queries. While media queries only consider viewport size and the browser's initial font size, container queries evaluate the size of individual elements, allowing for more dynamic layouts. This offers new possibilities like removing the need for specific breakpoints in grid layouts and utilizing custom units for more precise control. Despite some limitations, such as the necessity of defined containers and challenges with flexbox, container queries significantly enhance layout flexibility.
CSS-Tricks·2yElastic Overflow Scrolling
A client requested to mimic the 'rubber band' scrolling behavior seen on mobile devices. While most browsers have this built-in, creating a web version involves using a CSS-only solution. The implementation requires setting up a scrollable container with specific child elements, adding vertical margins to allow scrolling past edges, and utilizing the scroll-snap-type and scroll-snap-align properties to snap the content back in place.
CSS-Tricks·2yAll About JavaScript Loops
Loops in JavaScript perform repetitive operations and come in various forms, including while, do...while, for, for...of, for await...of, forEach, map, and for...in. Each has distinct uses and operational paradigms. While loops and do...while loops are simple yet potentially infinite, for loops are ideal for a set number of iterations. The for...of loop iterates over iterable objects, and forEach can be used when the index is needed. Map transforms arrays, and for...in iterates through object keys.