How Can I Write Hexadecimal RGBA Colors in CSS Concisely?

Exploring Hexadecimal RGBA in CSS

When it comes to CSS colors, we're familiar with hexadecimal notations like #ff0000 for red and #rgba(255, 0, 0, 0.5) for translucent red. However, is there a more concise way to define partially transparent colors in hexadecimal? The question arises: can we write something like #ff000088 or #ff0000 50%, where the last two digits (88 or 50%) represent the alpha value?

The Future of Hexadecimal RGBA

Exciting news awaits us with the upcoming CSS Color Module Level 4! Its editor's draft suggests the introduction of 4 and 8-digit hexadecimal RGBA notation. This means we may soon be able to define our colors like:

#0000    // 4 digits
#00000000 // 8 digits

Current Browser Support

Unfortunately, we still have a while to wait before these new notations are widely supported. However, that doesn't mean we can't start using them today. By including a fallback, we can ensure that non-supporting browsers will gracefully handle our new properties:

figure {
  background: #FEFE7F; // Fallback
  background: rgba(255, 255, 0, 0.5); // Modern browsers
  background: #ffff007F; // Future shorthand
}

The above is the detailed content of How Can I Write Hexadecimal RGBA Colors in CSS Concisely?. For more information, please follow other related articles on the PHP Chinese website!