CSS aspect-ratio property is useful for flexible designs without fixed dimensions, but can be overridden if both height and width are set on an element. [ more ]
GitHub - Jisan-mia/dom-projects: dom-projects is an open-source web app that helps you learn frontend development faster with a hands-on practice style. It is a collection of projects that you can use to learn HTML, CSS and JavaScript
dom-projects is an open-source web app for learning Frontend Development through hands-on practice with HTML, CSS, and JavaScript projects. [ more ]
CSS Hooks and the state of CSS-in-JS - LogRocket Blog
Inline styles simplify component styling but face limitations like no media queries or pseudo-classes. CSS-in-JS combines encapsulation with traditional CSS flexibility. CSS Hooks offer React developers a familiar way to leverage CSS-in-JS benefits. [ more ]
Quick Tip: How to Add Gradient Effects and Patterns to Text - SitePoint
Adding gradient effects and patterns to text on a web page is achievable by setting text as transparent, using background-clip, and applying background effects.
Examples include creating gradient effects, striped patterns, and using background images clipped to text characters with CSS properties. [ more ]
GitHub - evoluteur/isomorphic-table-cards: Isomorphic Table and Cards views with animated transitions on sorting, changing view, and browser resizing (using Vanilla Javascript, CSS, and HTML).
Isomorphic-Table-Cards is a Vanilla Javascript class for animated transitions in table and cards views. [ more ]
Combining CSS :has() And HTML For Greater Conditional Styling - Smashing Magazine
Using CSS :has() pseudo-class for conditional styling, like changing styles based on selected <option> in a <select> element without JavaScript. [ more ]
Building a web component inspired by Apple's Sheet on iOS, Vaul includes a drawer with a focus on natural experience and optimization challenges. [ more ]
Safari Technology Preview Release 191 now available for download for macOS Sonoma and macOS Ventura.
Update includes various new features, resolved accessibility issues, authentication fixes, CSS improvements, JavaScript enhancements, and lockdown mode updates. [ more ]
The :focus-within CSS pseudo-class enhances user experience in web forms by allowing control over focus and indicating user interaction.
Web accessibility encompasses physical and digital aspects, including color contrast, assistive technology availability, and adherence to WCAG guidelines. [ more ]
How To Draw Radar Charts In Web - Smashing Magazine
Radar charts, also known as spider charts, are a way to visualize data and make connections.
Radar charts use a circular, two-dimensional circle with plots representing categories, connected together to form shapes that show the relationship between category values. [ more ]
Scoping CSS inline styles with css-scope-inline - LogRocket Blog
Inline style tags in HTML have scoping issues, affecting the entire HTML page by default.
There are workarounds like using unique DOM identifiers or frontend frameworks, but css-scope-inline offers a simple solution using a JavaScript code snippet.
Inline style tag scoping can be useful for keeping both element structures and styling definitions in the same place for better readability. [ more ]
Infinity in CSS can be used inside a calc() statement for practical applications like achieving the highest possible z-index value.
Infinity in CSS does not represent true infinity; it is essentially a very large number, with varying values across different browsers and operating systems. [ more ]
Container queries allow you to set styles based on an element's current size, giving flexibility to the layout.
With container queries, you can tightly couple the styling of a component's content with the size of the component itself, increasing isolation and reducing complexity. [ more ]