Kevin Powell·1y5 CSS tips every developer should know
Discover five CSS features that can enhance your code by reducing JavaScript reliance and solving common design problems efficiently. Learn to utilize single color gradients for borders, effective use of user select, mastering the 'all' property for style resets, innovating with CSS masks, and employing anchor positioning for consistent element placement.
Kevin Powell·23wStop using the legacy color syntax
Modern CSS color syntax no longer requires the 'A' suffix in RGBA/HSLA or comma separators. The new space-separated syntax uses a forward slash before alpha values (e.g., `rgb(255 0 0 / 0.5)`). This syntax is mandatory for newer color functions like OKLCH, LAB, and the color() function, which support wider color gamuts beyond sRGB. The most practical benefit is relative colors, which allow manipulating existing color variables on-the-fly, such as adding transparency to any color format using syntax like `hsl(from var(--color) h s l / 0.5)`. The legacy comma syntax still works and doesn't require refactoring existing projects.
Kevin Powell·28wMasonry layout is coming, but it's got a new name
The CSS Working Group has officially named the masonry layout feature 'grid lanes' after over a year of community debate. All major browsers already have some implementation of the feature, with Firefox having a partial implementation for 5 years, Safari offering it in technical preview, and Chrome supporting it behind a flag. The naming decision followed extensive public polling and feedback, with the working group deliberately taking time to gather community input before finalizing the specification. Now that the display type has been named, the associated properties and values should be standardized quickly, potentially leading to rapid browser adoption.
Kevin Powell·1yRemove empty elements with one line of CSS - great for dynamic content
Learn how to efficiently hide empty elements in dynamic content using the CSS empty pseudo-selector, avoiding the need for complex JavaScript solutions. Ensure that your error messages are completely empty to work correctly and consider accessibility implications for screen readers.
Kevin Powell·1yEasily create overlapping sections on a website
Learn multiple solutions for creating overlapping sections on a website layout, focusing on using CSS techniques such as box-shadow and linear gradients. The post also provides tips to avoid common issues and discusses the merits of each method.
Kevin Powell·26wGoodbye VS Code, hello Zed!
A comprehensive walkthrough of setting up and configuring Zed editor as an alternative to VS Code. Covers installation, customization options including themes and fonts, profile management for different workflows, extension ecosystem, and AI-powered coding features. Highlights Zed's performance advantages, built-in Rust architecture, and unique features like independent UI/buffer font sizing and simplified profile configuration.
Kevin Powell·51wMake an animated glowing border effect with CSS
A comprehensive tutorial demonstrating how to create an animated glowing border effect using pure CSS, inspired by Google's AI search interface. The technique uses conic gradients, pseudo-elements, and CSS custom properties to achieve a dynamic glow that works with any background color and supports both light and dark themes. The implementation includes positioning tricks with z-index and stacking contexts, blur filters for the glow effect, and registered custom properties for smooth animations. The tutorial also covers creating variants for different border positions and making the effect easily customizable through CSS variables.
Kevin Powell·29wCSS Attribute Selectors
Explores advanced CSS attribute selectors beyond basic usage, covering operators like tilde (~=), pipe (|=), caret (^=), dollar ($=), and asterisk (*=). Demonstrates practical applications including styling links based on file types (PDFs) and external URLs using prefix/suffix matching. Addresses common performance concerns, clarifying that modern browsers handle attribute selectors efficiently.
Kevin Powell·38wHTML & CSS form tutorial / Frontend Mentor
A comprehensive tutorial covering HTML form structure and CSS styling techniques. Demonstrates building a contact form with proper semantic markup, grid layouts, form validation states, accessibility considerations, and responsive design. Covers advanced CSS concepts like custom properties, nesting, pseudo-elements, and the has() selector for dynamic styling based on form states.
Kevin Powell·1yThis CSS Color Game is way harder than I expected
Explore a fun and challenging CSS color guessing game where you need to match colors to their CSS names. The author describes their experiences and struggles with identifying specific color names like 'goldenrod', 'dark orchid', and 'ghost white'. They share their mistakes and learnings throughout the game, providing a link for readers to try it themselves.
Kevin Powell·49wGetting started with CSS Style Queries
CSS style queries are a new feature that allows developers to apply styles based on custom properties of container elements. Unlike traditional approaches using modifier classes, style queries enable conditional styling that responds to both container dimensions and custom property values. They work by querying custom properties from parent containers using the @container style() syntax, making it possible to create dynamic theming systems and responsive layouts that adapt based on multiple conditions. While browser support is currently limited to custom properties only, style queries open up new possibilities for component-based styling that weren't possible before.
Kevin Powell·1yWrapper Classes: A Layout Foundation
Learn how to effectively use wrapper classes to manage layout issues in HTML and CSS. Discover the importance of CSS logical properties for responsive design and understand when to use wrappers versus containers for better content flow. The post also highlights a free HTML and CSS course for beginners, covering essential topics like flexbox, grid, and responsive design.
Kevin Powell·1yHow to set max-columns using auto-fit or auto-fill
Learn how to set a maximum number of columns in a CSS grid layout using auto-fit or auto-fill, and how to handle gaps and other layout issues. The post provides detailed guidance on using the calc() function to ensure the grid adapts to different screen sizes while capping the maximum column count.
Kevin Powell·1yMy best CSS tips from 2024
The post reviews five valuable CSS tips from 2024, focusing on timeless techniques that many developers overlook. Key highlights include customizing link underlines with thickness, color, and style properties, optimizing background images with repeat, round, and space properties, using nth-child to select ranges of elements, utilizing CSS counters for dynamic numbering, and solving text wrap issues on buttons using fit-content. These tips help enhance styling without relying on modern CSS features.
Kevin Powell·1yCentering in CSS is a meme for the wrong reasons
The post explores various methods to center elements in CSS, comparing older techniques like position absolute with modern methods like Flexbox and CSS Grid. It highlights multiple options, such as using the translate property, margin auto, and new CSS properties like place-items and place-content.
Kevin Powell·52wEasily transition to and from display none
CSS now supports animating the display property using @starting-style and transition-behavior: allow-discrete. This enables smooth transitions to and from display: none, solving a long-standing limitation. The technique requires setting up a closed state with display: none and opacity: 0, an open state with display: grid and opacity: 1, and using @starting-style within the open state to define initial animation values. This approach works for popup menus, modals, and other UI elements that need to appear and disappear smoothly.
Kevin Powell·1yYou can scope styles with vanilla CSS now
Scoped styles in vanilla CSS allow developers to apply specific styles to elements without affecting others outside the designated scope. This technique uses the @scope rule to limit the style application, thereby preventing style bleeding and reducing specificity issues. It enables behaviors similar to those found in JavaScript frameworks, offering more precise control over component styling.