Tag: css
All the articles with the tag "css".
My posts
Text Truncation with Ellipsis on Multiple Lines
Published: at 04:00 PMLearn effective CSS techniques for text truncation with ellipsis, covering both single-line and multi-line methods. This guide explains how to implement classic text overflow, use WebKit's line-clamp for multiple lines, and create fallback solutions for cross-browser compatibility. Ideal for web developers aiming to improve content display and user experience in limited spaces.
Tech Watch Posts
Tailwind’s @apply Feature is Better Than it Sounds
Published: at 02:19 PMMost of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obviously, nobody wants to use it. Personally, I think Tailwind's @apply feature is better than described.
Custom Progress Element Using the attr Function
Published: at 02:30 PMLearn how to style a custom progress element in CSS using the attr() function. Discover modern techniques like dynamic coloration, gradient tricks, and conditional logic.
The <select> element can now be customized with CSS
Published: at 09:05 AMChrome 135 introduces appearance: base-select, enabling fully customizable & styleable <select> elements with rich HTML support. Learn how to design accessible, standardized dropdowns without breaking old browsers.
ESLint now officially supports linting of CSS
Published: at 01:55 PMESLint now supports CSS linting through the official @eslint/css plugin, featuring validation rules, tolerant parsing, and custom syntax support including Tailwind. Learn how to configure and use CSS linting in ESLint.
The styling dilemma in React
Published: at 03:18 PMThis article discusses various styling methods available in React, such as CSS modules, styled-components, and Tailwind CSS, each offering unique advantages and challenges. It guides developers through key considerations when selecting a styling approach, focusing on factors like scalability, performance, and maintainability to help make informed decisions.
The Popover API: Your New Best Friend for Tooltips
Published: at 03:09 PMThe article discusses the Popover API, which simplifies the creation and management of tooltips, popovers, and other overlays. It provides developers with a standardized, accessible way to position popovers with HTML and JavaScript. New CSS features like anchor and @position-try help customize popover placement, making it easier to handle viewport overflow and styling. These improvements reduce reliance on complex JavaScript or third-party libraries, although browser support for some features may still be limited.
Improving rendering performance with CSS content-visibility
Published: at 01:31 PMNolan Lawson's article discusses how the CSS property content-visibility can significantly improve rendering performance by skipping the rendering of off-screen elements. This optimization is especially useful for complex or resource-heavy layouts. By hiding non-visible content until needed, developers can reduce layout and painting costs, making pages load and scroll more smoothly. Lawson provides practical examples and benchmarks to demonstrate how using content-visibility can lead to better performance without sacrificing visual integrity.
Animate to height: auto; (and other intrinsic sizing keywords) in CSS
Published: at 12:28 PMThe article introduces the interpolate-size property and the calc-size() function, enabling smooth CSS animations and transitions to intrinsic sizing keywords like auto, min-content, and max-content. These tools help create more natural transitions between size changes, addressing the challenge of animating to height: auto. Developers can now opt into these behaviors for smoother and more visually appealing animations in supported browsers.
Replacing React code with CSS :has selector
Published: at 07:25 AMThe article explores how the new CSS :has selector can simplify React code by eliminating the need for complex JavaScript logic. It allows for targeting parent elements and handling UI interactions like focus states, form element conditions, and dynamic styling without relying on React's state or re-renders. The post provides examples where using :has improves accessibility, reduces unnecessary React components, and enhances performance.
Advanced CSS Grid Techniques
Published: at 01:42 PMThe article discusses advanced CSS Grid techniques, including using grid areas for named layouts, auto-placement for automatic item positioning, and the minmax() function to set flexible track sizes. It also covers the differences between auto-fill and auto-fit for responsive grids and how to combine CSS Grid with Flexbox for layout alignment. Practical examples and code snippets guide users through creating dynamic, responsive layouts with ease.