Click any tag below to further narrow down your results
Links
This article presents the CSS Advent Calendar, featuring daily web development tips and tricks throughout December. Each day reveals a new resource or concept related to CSS, aimed at enhancing your skills. It’s created by Steve Harrison.
This article explains the CSS subgrid feature, which allows for more flexible layouts by extending grid properties to nested elements. It covers practical examples to show how subgrid can improve semantic markup and enhance design without losing layout integrity. The tutorial also highlights common pitfalls and alternative methods.
This article discusses how to adjust letter-spacing in web typography based on font size for better readability. It explains the CSS clamp function and provides code examples to achieve a smooth transition in letter-spacing as the font size increases.
The article introduces a new HTML `meta` tag for text scaling in Chrome Canary, aimed at improving accessibility by respecting users' system text size preferences. It outlines how to implement the tag and offers tips for web developers to support text scaling on their sites.
This article explains the linear() timing function in CSS, which allows for more complex animations like springs and bounces. It contrasts linear() with traditional Bézier curves and discusses tools for generating values. The author also covers limitations and performance considerations.
This article discusses methods for achieving CSS property value inheritance, especially when direct inheritance isn't supported. It explores using custom properties, the hypothetical inherit() function, aspect-ratio, currentColor, and other CSS techniques to work around limitations.
This article lists various mistakes in CSS design and implementation, along with proposed corrections. It covers issues like naming conventions, property behavior, and layout challenges that affect usability and consistency. The suggestions aim to improve CSS functionality and developer experience.
The article explores the complexities of CSS layout and the predictability issues that arise from its rules. It discusses the potential of constraint systems as an alternative but highlights their own challenges, including verbosity and unpredictability. The author argues that both systems ultimately struggle because layout is inherently difficult.
CSS Pro is a browser extension that allows users to edit website designs visually without any setup. It generates clean CSS code in real-time, making it ideal for quick prototyping and collaboration. The tool integrates AI assistance to streamline design changes and offers various subscription options.
VoxCSS is a CSS-based voxel engine that allows developers to create 3D grids in the DOM. It supports rendering HTML cuboids with various shapes, colors, and textures, and works with frameworks like Vue, React, and Svelte. The engine also optimizes performance through culling and voxel merging techniques.
This article introduces Styleframe, a TypeScript CSS API designed for building scalable design systems. It highlights features like zero-runtime CSS generation, customizable themes, and seamless integration with design tools like Figma. Additionally, it showcases fluid responsive design principles for adaptive typography and spacing.
OKLCH is a color model that aims for perceptual uniformity, making colors more consistent and easier to manipulate compared to traditional models like RGB and HSL. It uses three components: Lightness, Chroma, and Hue, allowing for predictable color palettes and gradients. This model is particularly useful for modern displays that support wider gamuts like Display-P3.
This article explores how 37signals successfully builds three robust web applications using only vanilla CSS, without any preprocessors or build tools. It highlights their evolving CSS architecture, focusing on simple structures, efficient color management, and innovative spacing techniques. The author analyzes how these practices leverage modern CSS features for effective design.
This article showcases various optical illusions created using CSS, detailing how each effect tricks the eye. It includes demonstrations of illusions like the Poggendorff and the Cornsweet, along with explanations of the coding techniques used to achieve them. Interactivity is emphasized, allowing users to hover over elements to reveal the true nature of the illusions.
This tool simplifies web design by allowing users to click on any element to make changes without needing screenshots or complicated explanations. It integrates a terminal for code access and supports multi-editing, responsive testing, and CSS inspection. No account is required, making it easy to get started quickly.
This article discusses how to optimize CSS loading by using compression dictionaries. It explains the trade-offs between critical CSS and full CSS, then introduces a method that allows for efficient loading of overlapping styles across different pages, reducing bandwidth and improving performance.
StyleX is Meta's new styling library that combines the benefits of CSS-in-JS with the performance of static CSS. It compiles styles at build time into atomic CSS, reducing file size and resolving common CSS issues like collisions and specificity wars. The system is now the standard for styling across Meta's products and other companies.
The article critiques traditional web components for marketing sites, arguing they unnecessarily rely on JavaScript. It proposes an alternative approach using CSS Web Components, which leverage CSS for functionality and styling while minimizing JavaScript dependencies, making them more efficient for marketing design systems.
This article explains how the CSS Custom Highlight API improves syntax highlighting by avoiding DOM manipulation. It highlights the performance benefits and cleaner code structure compared to traditional methods that rely on multiple span elements. The implementation details and browser support are also discussed.
This article highlights four key CSS features every front-end developer should master by 2026: sibling-index(), @container scroll-state(), text-box, and typed attr(). The author explains how these features enhance layout control, scrolling interactivity, and typography precision.
This article discusses the common issue of duplicated CSS keyframes in projects and proposes a solution using keyframes tokens. By creating a centralized stylesheet of dynamic and customizable keyframes, developers can streamline animations and avoid conflicts in component-based architectures.
ReliCSS helps developers analyze legacy CSS code by identifying outdated browser hacks and techniques. It highlights these "artifacts," assigns severity levels for refactoring, and runs entirely in the browser for security. Future updates will include file uploads and a command line interface.
This article explains what ligatures are in typography and how they enhance text appearance. It provides step-by-step instructions for using ligatures in various design software, including Adobe products, Figma, Microsoft Office, and CSS.
This article breaks down animation performance in web design, explaining the browser's rendering pipeline and how different animation techniques rank in efficiency. It categorizes animations into tiers based on their impact on performance, helping developers choose the best methods for smooth user experiences.
The article critiques the shadow DOM, arguing it complicates styling and usage for developers. It claims that relying on shadow DOM can lead to additional work and frustration, as it limits flexibility and often requires more effort to integrate with existing styles. The author believes it’s better to prioritize usable HTML and avoid the shadow DOM unless absolutely necessary.
This article introduces a tool for generating metallic text effects using CSS gradients and reflections. Users can select from preset styles or customize their own designs. A live preview helps visualize the changes in real-time.
The article critiques responsive design practices where layouts switch to mobile versions too soon, leading to awkward displays. It emphasizes the importance of maintaining design integrity by using more breakpoints and adapting layouts dynamically.
This article introduces CSS Grid Lanes, a new layout system that simplifies masonry designs using CSS Grid properties. It allows for flexible, responsive layouts without media queries, accommodating varying item sizes and placement. The feature is currently available in Safari Technology Preview.
This tool lets you create liquid glass, glassmorphism, and neumorphism effects with CSS. You can preview your designs live and export the code instantly. It also offers several preset styles for quick customization.
Scroll-driven animations can now be achieved using only CSS, allowing developers to create dynamic effects linked to user scrolling without relying on JavaScript. This guide explains the components of scroll-driven animations, including targets, keyframes, and timelines, and provides examples of implementing these animations effectively while considering accessibility.
The article discusses techniques for creating color-shifting animations in web design, emphasizing the importance of blending colors smoothly and enhancing user experience. It provides examples and code snippets that demonstrate how to implement these effects using CSS and JavaScript.
Anchor positioning simplifies the process of placing elements on a webpage relative to other elements, allowing for responsive design using only CSS. By establishing a connection between an anchor (e.g., an avatar) and a target (e.g., a menu), developers can easily control the menu's position with properties like position-area and anchor(). This method enhances flexibility, especially for mobile views where space is limited.
The article discusses modern CSS techniques for creating effective section layouts on web pages. It highlights various approaches, including the use of CSS Grid and Flexbox, to enhance visual structure and improve user experience. Additionally, it provides practical examples and best practices for implementing these layouts in web design.
Joel Dare advocates for using pure HTML and CSS for web development in 2025, emphasizing simplicity, speed, and security. He argues that many modern frameworks over-engineer solutions, while pure HTML and CSS provide a lightweight and efficient alternative that is accessible and easy to deploy. Dare highlights the environmental and accessibility benefits of smaller page sizes and standard HTML practices.
The State of CSS 2025 report provides insights into the latest trends, features, and usage of CSS, showcasing community feedback and adoption rates. It highlights advancements in styling capabilities and areas for future development, reflecting the evolving landscape of web design.
The article compares the performance of Tailwind CSS and Linaria, examining their efficiency in handling styling in web development. It highlights key differences in rendering speed, bundle size, and overall usability for developers, ultimately guiding readers in choosing the right tool for their projects.
The article discusses a method for implementing low-quality image placeholders (LQIP) using only CSS, allowing for a smoother user experience while loading images. It outlines the advantages of this technique, such as faster perceived load times and improved aesthetics. Additionally, it provides practical examples and code snippets to help developers integrate LQIP into their projects.
The article discusses the perception of CSS trigonometric functions, specifically sin() and cos(), which have been labeled as the "most hated feature" in CSS according to the State of CSS 2025 survey. It aims to explain their practical applications in web design, focusing on how these functions can be utilized for creating circular and wavy layouts in CSS.
The article discusses the accessibility challenges associated with CSS carousels and offers best practices for making them more usable for all users, including those with disabilities. It emphasizes the importance of proper markup, keyboard navigation, and screen reader support to enhance the user experience.
The article explores the complexities and nuances of CSS height properties, particularly how different methodologies and browser behaviors can lead to unexpected results. It emphasizes the importance of understanding content flow and layout mechanics when working with height in CSS to avoid common pitfalls.
Easily incorporate animations into your Tailwind CSS projects using the @midudev/tailwind-animations package. The article provides installation instructions and examples of how to implement various animation classes in your web application. Additionally, it introduces utility classes for animating elements based on their position in the viewport.
Kelp is a lightweight UI library designed for HTML enthusiasts, utilizing modern CSS and Web Components without requiring a build step. It offers customizable features through CSS variables and aims to enhance web development by providing semantic utility and component classes. The library is currently in active development, and users can sign up for notifications on new features and releases.
The author discusses the development of an alt text button for images on their website, inspired by a feature on Mastodon. By using HTML and CSS, they created a button that reveals alt text associated with an image, enhancing user experience and accessibility. The article also outlines the code structure, design challenges, and potential improvements for the solution.
Tailwind CSS is a highly opinionated framework that polarizes developers, boosting productivity for some while feeling cumbersome for others. The article explores both the drawbacks and benefits of using Tailwind, emphasizing its impact on team dynamics and design consistency.
Safari Technology Preview introduces support for the CSS property text-wrap: pretty, which enhances web typography by evaluating entire paragraphs for better text flow, reducing short last lines, improving rag, and minimizing hyphenation. This new feature aims to elevate the visual quality of text on the web, drawing from traditional typesetting practices while addressing long-standing issues faced by web designers.
The article discusses techniques for targeting specific characters in CSS rules, providing insights into how to effectively style content based on character-specific attributes. It emphasizes the importance of understanding character encoding and the impact it has on styling elements within web design.
The article explores the influence of classic cartoons on modern web animations, particularly through CSS techniques. It discusses how these animations can enhance user experience and provide a nostalgic touch to web design. Practical examples and inspirations from well-known animated characters are also highlighted to showcase the potential of animation in web development.
A new concept called Item Flow is emerging to unify CSS layout properties, integrating features from Flexbox and Grid while also accommodating masonry layouts. This approach aims to simplify layout options by introducing a shorthand property, item-flow, along with new longhands for item-direction, item-wrap, item-pack, and item-slack, potentially enhancing layout capabilities and addressing long-standing design needs.
Reanimated 4 has been released as a stable version, introducing a new CSS-compatible animation API that simplifies state-triggered animations in React Native. While the focus is on declarative CSS animations for ease of use and optimization, worklets remain essential for complex animation scenarios. The update ensures compatibility with previous versions and aims to enhance developers' experiences in creating dynamic mobile app interfaces.
The article discusses the CSS property font-size-adjust, arguing that its importance is often misunderstood, especially its potential to create consistent font sizing across different typefaces. It emphasizes that this property can effectively manage font sizes on a webpage, particularly when using multiple fonts, and highlights the need for careful consideration of line height to avoid layout issues.
Figma's new layout grid feature, introduced in May 2025, enhances design flexibility by mimicking CSS Grid, allowing designers to create two-dimensional layouts. Understanding CSS Grid principles is crucial for leveraging Figma's capabilities and ensuring seamless collaboration with developers. The article highlights the differences and similarities between Figma's Grid and CSS Grid, emphasizing the importance of knowing both tools for effective design.
Tufte CSS is a styling tool designed for web articles, inspired by Edward Tufte’s principles of simplicity, effective typography, and the integration of graphics with text. It aims to adapt Tufte's print techniques to the web, allowing users to implement features like sidenotes, margin notes, and refined text presentation. The project encourages contributions and emphasizes that its techniques are a starting point for web design rather than strict guidelines.
The article discusses methods for converting SVG graphics into CSS styles, highlighting the benefits of using SVG for web design. It provides a step-by-step guide on how to achieve this conversion effectively, making it easier for developers to incorporate scalable vector graphics into their projects.
CSS inline conditionals with the if() function are now available in Chrome 137, allowing developers to create cleaner, more dynamic styles using condition-value pairs. This function supports style, media, and supports queries, enabling streamlined inline logic for responsive designs and state-based styling. Future enhancements may include range querying and integration with custom functions in CSS.
The article discusses the concept of CSS specificity, which determines how styles are applied to HTML elements based on their selectors. It explains the hierarchy of different selector types and provides insights on how to manage specificity to avoid conflicts in styling. Understanding specificity is essential for effective CSS management and ensuring the desired styles are applied accurately.
The article discusses the concept of partial keyframes in animations, highlighting their advantages in creating more fluid and flexible motion effects. It explains how utilizing partial keyframes can enhance the control and adaptability of animations in web design. Practical examples and code snippets are provided to illustrate the implementation of this technique.
The article discusses techniques for hiding elements that require JavaScript on a website when JavaScript is disabled, emphasizing the use of the `<noscript>` tag and a special class, `d-js-required`, to manage visibility. It outlines various approaches, comparing their efficiency and maintainability, ultimately recommending a simplified method to enhance user experience without cluttering the code.
Google I/O 2025 introduced ten innovative features aimed at enhancing web development and productivity. Key highlights include easier carousel creation with CSS, new AI APIs for improved functionality, enhanced debugging tools in Chrome DevTools, and a streamlined sign-in experience through Credential Manager.
The article explores the concept of "liquid glass" as a CSS property, discussing how it can be implemented in web design to create visually appealing effects. It highlights the potential benefits and aesthetic enhancements that this technique can bring to user interfaces.
Apple has introduced a private CSS property that allows developers to create liquid glass effects for web content. This feature enhances the visual aesthetics of web pages, providing a unique design element that mimics the appearance of glass. The article discusses how this property can be utilized in web development to improve user interfaces.
The article discusses techniques for minimizing CSS file sizes to enhance website performance and loading speed. It highlights various strategies such as using shorthand properties, removing unused styles, and leveraging CSS preprocessors. By applying these methods, developers can create more efficient and maintainable stylesheets.
Modern web development is often hampered by excessive JavaScript, leading to slow loading times and performance issues. The article advocates for a return to using HTML and CSS alone, highlighting new CSS features that enhance usability and efficiency, while suggesting that many websites can function effectively without JavaScript. It emphasizes the importance of understanding CSS and its potential to create high-quality, optimized web experiences.
The article discusses the use of the sibling-index() and sibling-count() functions in CSS to determine an element's position among its siblings and the total number of siblings. It also highlights how to create custom functions to simplify the code while utilizing these features. However, it notes that these functions currently have limited browser support, primarily in Chrome.
The introduction of the CSS `random()` function allows developers to generate random values directly within styles, enabling dynamic animations, layouts, and colors without JavaScript. The article provides various examples, including creating a star field, random rectangles in a grid, and interactive elements like a spinning wheel, demonstrating the versatility of this new feature in modern web design.
The article discusses the lessons learned from creating PostCSS, highlighting its flexibility and the benefits of using a plugin-based architecture for developing CSS. It emphasizes the importance of community feedback and the iterative process in improving the tool's functionality and user experience. Key takeaways include the significance of documentation and collaboration in open-source projects.
The article explores the evolution and challenges of CSS implementation, emphasizing the importance of maintaining a balance between flexibility, modularity, and simplicity in web design. It discusses various CSS methodologies, their historical context, and critiques the current focus on complex systems, arguing for a return to the fundamental principle of separating structure (HTML) from presentation (CSS).
The article provides a comprehensive overview of modern CSS colors, discussing various color formats and their applications in web design. It emphasizes the importance of understanding color theory and how to effectively implement colors to enhance user experience. This is part one of a series aimed at demystifying CSS colors for developers.
The article explores the concept of partial keyframes in CSS animations, highlighting how they can enhance the smoothness and control of animated transitions. It provides examples and practical tips for implementing these techniques effectively in web design.
The article discusses the advantages and features of Unistyles, a utility for styling components in web development that simplifies the process and enhances productivity. It highlights how Unistyles stands out in comparison to traditional CSS methods, making it an essential tool for developers seeking efficient styling solutions.
The article outlines various traps and common misunderstandings that developers may encounter in HTML, CSS, and JavaScript, emphasizing concepts like min-width, stacking context, and floating-point number behavior. It provides insights into potential bugs stemming from CSS properties and JavaScript data types, aiming to enhance developers' awareness and coding practices.
The article discusses the new CSS function contrast-color(), which allows browsers to automatically select either black or white text color based on the background color to ensure better contrast. While this feature simplifies color management in web design, it does not guarantee accessibility, as the choice may not always meet contrast standards. Designers and developers must still carefully consider color combinations and use additional tools, such as the prefers-contrast media query, to enhance accessibility.
Improve your CSS navigation menus by recognizing and fixing five common mistakes that hinder user experience. This guide covers target area issues, the use of Flexbox `gap`, dropdown delays, and the importance of smooth scrolling for in-page links.
The content appears to be corrupted or unreadable, making it impossible to extract meaningful information or insights regarding the topic of the CSS reset. As a result, the key points and arguments of the article cannot be summarized effectively.
The site provides an overview of building web applications and websites using only HTML, CSS, and JavaScript, without relying on frameworks or build tools. It covers topics such as Web Components, modern CSS, and creating single-page applications, emphasizing the long-term benefits of a simpler, low-maintenance approach to web development. This resource is intended for those already familiar with web technologies.
The article argues for the obsolescence of single-page applications (SPAs) in modern web development, suggesting that advancements in CSS and web standards make traditional multi-page applications more efficient and user-friendly. It highlights the potential of CSS to enhance performance and user experience, advocating for a shift away from SPA reliance.
A collection of CSS custom functions is available that utilizes the native CSS @function rule, requiring no build step for integration. Currently supported in Chrome 141+, it includes around 43 functions for various tasks, including math, color manipulation, typography, and layout, making CSS more efficient and streamlined for developers.
The article critiques the current state of HTML and the Document Object Model (DOM), arguing that they have become bloated and outdated, failing to meet the needs of modern web applications. It highlights the inefficiencies and complexities of working with the DOM and CSS, suggesting a need for rethinking these technologies to better align with contemporary development practices and user expectations. The author calls for a more streamlined and effective approach to web development that moves away from legacy constraints.
WebTUI is a modular CSS library designed to enhance web interfaces with the aesthetics of terminal UIs. It offers various themes and supports installation via popular package managers, providing a straightforward setup for developers. The library includes a monorepo of official packages to extend functionality and customization.
The article discusses five essential CSS functions that can enhance web design, focusing on their practical applications and benefits. It emphasizes the importance of leveraging these functions to create more dynamic and responsive styles in modern web development.
The article explores the use of WebGL for creating smooth gradients in web applications, highlighting its advantages over traditional CSS methods. It discusses techniques for implementing gradients efficiently and provides examples to guide developers in leveraging WebGL's capabilities for enhanced visual effects.
The article discusses various techniques and tools for styling Markdown content effectively. It emphasizes the importance of visual presentation and usability, providing insights into customizing Markdown for better readability and aesthetics. Additionally, it covers the use of CSS and other styling methods to enhance the user experience.
The article discusses the ongoing evolution and reinvention of CSS, highlighting various improvements and features that have emerged over time. It emphasizes the adaptation of CSS to meet modern web development needs and the challenges developers face in keeping up with its changes. The piece reflects on how these advancements continue to shape the web design landscape.
Inline CSS can be exploited to steal attribute data without requiring external stylesheets by using the attr() and image-set() functions. This method leverages conditional statements in CSS to make background requests based on attribute values, facilitating data theft from elements. The technique is primarily effective in Chromium-based browsers and can be utilized for various types of data extraction through crafted inline styles.
The article discusses the evolution of CSS units, highlighting the introduction of the 'dvh' unit among a total of 42 different units used today compared to the original 9. It reflects on the changes in web development practices and tools, including the historical shifts in user interface APIs for Windows, the rise of WYSIWYG editors, and the challenges faced by content creators in navigating new algorithms and competition.
The article discusses the use of metaprogramming in the Zig programming language, particularly focusing on parsing CSS into structured types. It explains the implementation details of a CSS parser that converts simplified CSS syntax into Zig data structures, including the use of reflection and helper functions for parsing rules and properties. The author also shares links to a live implementation video and the source code on GitHub.
The article introduces normalize.css, a CSS tool designed to create consistent rendering of elements across different browsers while adhering to modern standards. It targets specific styles that require normalizing and is widely used by notable platforms such as Twitter and GitHub. Users can download version 11.0.0 and find the source code on GitHub.