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
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.
CSS Grid - A Deep Dive
Published: at 01:38 PMThe article provides an in-depth explanation of CSS Grid, a powerful layout system for web development. It covers fundamental concepts such as grid containers, items, lines, tracks, and cells, and demonstrates how to define rows and columns, use fractional units, and control item placement. Practical examples include creating responsive designs, managing grid gaps, and nesting grids. The post also introduces features like auto-fit and auto-fill to enhance grid flexibility.
Why is CSS-in-JS slow?
Published: at 04:26 PMThe article explains why CSS-in-JS can be slow, primarily due to how it handles style generation and rendering. Traditional CSS is parsed directly by the browser, but CSS-in-JS solutions often require JavaScript to generate styles, leading to delays in rendering as the browser must parse and execute JavaScript before applying styles. Some modern tools like PandaCSS or Vanilla Extract mitigate this by compiling CSS ahead of time, reducing performance issues. The article also highlights the trade-offs between different CSS-in-JS approaches.