CSS

A developer successfully built a playable version of DOOM using modern CSS for 3D rendering and JavaScript for core game logic. By leveraging advanced features like @property, trig functions, anchor positioning, and clip-path, the project demonstrates the immense power and evolution of CSS. While performance remains a challenge due to browser limitations, it effectively pushes the technical boundaries of web standards.

In this guide, the author explores nine powerful, often overlooked browser APIs and CSS features that eliminate the need for heavy external dependencies. From performance-boosting tools like requestIdleCallback and requestAnimationFrame to modern CSS capabilities like container queries and :focus-within, these native solutions improve efficiency, accessibility, and architectural simplicity in modern web development.

CodePen is a popular social development environment for front-end designers and developers. It allows users to write code in the browser, experiment with HTML, CSS, and JavaScript, and share their projects instantly. It is widely used for prototyping, learning new web technologies, and showcasing creative coding efforts within the global developer community.

This article explores the new customizable <select> element in Chromium browsers. Through fun demos like a stack of folders, a fanned deck of cards, and a radial emoji picker, the author illustrates how to use advanced CSS features like ::picker(), sibling-index(), and @starting-style to create interactive, highly stylized dropdown components that remain accessible.

This challenge tests your knowledge of the CSS specification by presenting 20 rounds of property names. Users must distinguish between legitimate CSS properties and fabricated ones, navigating through over 600 existing properties, some of which are designed to sound deceptive. The game demands accuracy as users face increasingly difficult examples.

Applying border-radius to nested elements like article and header causes color bleeding due to anti-aliasing during the composition process. Transparent pixels at the edges blend with background colors before the final composite. Setting overflow: hidden on the parent container ensures correct clipping, preventing the visible white seam between header and article elements.

MDN recently overhauled its frontend to replace a debt-ridden React SPA with a component-based architecture using Lit web components and server components. This shift improves maintainability, performance through granular CSS/JS loading, and developer experience using Rspack. By leveraging modern web standards like Declarative Shadow DOM, MDN achieved a faster, more modular, and highly performant website.

dev.css is a lightweight, classless CSS framework designed to make plain HTML websites look modern and responsive with minimal effort. Weighing about 4.8kb, it supports semantic HTML, custom themes, and various addons for enhanced functionality. It is ideal for simple projects like blogs, personal websites, and rapid prototyping.