Firefox now recognizes 4-digit hex color codes as rgba values during parsing

Recently, while using Firefox version 49, I accidentally discovered that it parses 4-digit hex colors as rgba. After referring to the CSS specification and searching through MDN, I couldn't find any documentation about this feature. Can anyone provide an explanation for this behavior?

.content {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #999;
  text-align: center;
  position: relative;
}
.overlay {
  position: absolute;
  background-color: #f5f5;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
<div class="content">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" />
  <div class="overlay"></div>
</div>

cssfirefox

Answer №1

Yes, that's totally valid:

Colors can be specified using the Red-Green-Blue-Alpha model (RGBA) in a couple of different ways:

You can use either Hexadecimal notation #RRGGBBAA or #RGBA

  • The "#" sign followed by eight hexadecimal characters (0-9, A-F), where the first two digits represent red, the second two for green, the third two for blue, and the last two for transparency.
  • The "#" sign followed by four hexadecimal characters (0-9, A-F), with the first digit for red, the second for green, the third for blue, and the last one for transparency. Both the four-digit RGB form (#RGBA) and the eight-digit version (#RRGGBBAA) are identical; for instance, #f038 and #ff003388 both denote the same color.

This is compatible with Chrome 52, Firefox 49, Opera 39, and Safari 9.1

Answer №2

This information is part of the latest Color level 4 standard and was introduced in Firefox version 49:

8 digits
In this notation, the first 6 digits function the same as the traditional 6-digit format. The last pair of digits represent the alpha channel of the color, with '00' indicating full transparency and 'ff' representing full opacity.

4 digits
A condensed version of the 8-digit format, where the first digit represents the red channel from minimum to maximum values using hexadecimal numbers. The following three digits stand for the green, blue, and alpha channels respectively.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am having trouble with Mpdf's block absolute positioning feature not functioning correctly

I am trying to position my block using absolute, but it seems to be staying in the same place regardless of the left/top attributes I set. Here is the PHP code snippet: $mpdf = new \Mpdf\Mpdf(); $mpdf->WriteHTML($stylesheet,\Mpdf\HT ...

phphtmlcssmpdfabsolute

Can child elements be centered using their pseudo-elements using CSS alone?

Consider the code snippet below: <div class="example-container"> <p class="example">a</p> <p class="example">bbb</p> <p class="example">cc</p> </div> and the cor ...

htmlcss

Tips for displaying HTML elements beyond the boundaries of an iframe

Similar Inquiry: How can content from an IFRAME overflow onto the parent frame? I am in search of a potential solution for the following issue: There is a specific element with the style "position: absolute" within a page loaded into an iframe. Based ...

htmlcssiframexhtml

Modify the color of the active class in Bootstrap

I am trying to modify the color of the active class in my HTML code as I create a nav sidebar. Here is the snippet from my code: <div class="col-sm-2"> <ul class="nav nav-pills nav-stacked nav-static"> <!--stacked for vertic ...

htmlcsstwitter-bootstrapbackground-color

The width of Highcharts items is not reaching 100% when displayed in a carousel

I'm currently using dynamic highcharts graphs within my bootstrap carousel. Here is a snippet of my carousel setup: <div class="carousel"> <div class="carousel-inner"> <div id="item"> <div id="container1" data-h ...

javascriptcsstwitter-bootstraphighchartscarousel

The distinction between using document.getElementById and document.getElementsByClassName in JavaScript

One thing that stands out is why does document.getElementsById function as expected here <div id="move">add padding</div> <button type="button" onclick="movefun()">pad</button> <script> function movefun() { document.get ...

javascriptjquerycsshtml

Change the blue line to a crisp, clean white

Is it possible to customize the color of the blue line that appears when clicked? class Greetings extends React.Component { render() { return <div>Greetings {this.props.name}</div>; } } ReactDOM.render( <div> <p tabInde ...

javascriptcssreactjs

Ways to prevent the navbar from disappearing when the Chrome browser is resized

I am looking to align the navbar lists, which are currently on the right side, below the header icon placed on the left side. Rather than toggling the navbar with a button, I want it to simply expand under the header icon. It seems that the disappearance ...

htmlcssbootstrap-4

What is the best approach for optimizing CSS changes across multiple pages in WordPress?

I am looking to customize the background images for different groups of pages on my WordPress site. Currently, I am manually assigning the background images to individual pages by using PageID in the code snippet below. With over 1000 pages, this method i ...

phphtmlcsswordpress

IE disregard min-height property of flex container

After researching, it appears that using the standardized flex terms should work with IE10/IE11. I have a container div with 2 child divs. Both child divs are smaller than 400px, so there should always be enough space for the justify-content: space-betwe ...

htmlcssinternet-explorerflexbox

Adjust the Size of Bootstrap Offcanvas using CSS (Bootstrap version 5.2)

Is there a way to change the size of specific bootstrap offcanvas elements without affecting all of them? I am aware that I can modify the SASS variable ($offcanvas-horizontal-width: 400px) to change the size of all offcanvas elements. What I would like i ...

htmlcssbootstrap-5

Tips for vertically aligning elements within the body while excluding the navbar from being centered

On my webpage, I have a navigation bar and a lot of content. The code structure looks something like this: .container { display: flex; justify-content: center; align-items: center; } <div class="navbar"> <!-- Various links for navigation ...

htmltwitter-bootstrapcssflexbox

Searching for li elements that contain text values - a guide

I have a list of letters and I want to filter out any values that contain the text entered by the user in a textbox. Here is the design: Search List: <input type="text" id="txtSearch" /> <ul> <li>Coffee1</li> <li>Coffe ...

javascriptjquerycss

What is the best way to achieve consistent appearance across all browsers and various screen sizes?

I have implemented owl carousel on my website for sliding the container. While the slider functions correctly, I encounter issues when minimizing the screen or viewing it on different monitors or browsers. The problem lies in the fact that the code is not ...

htmlcssresponsive-designowl-carousel

Crafting a captivating stacked image using just two segments

Recently, I designed my own personal website. To make it visually appealing, I decided to use a background picture as the header and placed my portrait as the avatar. My inspiration for the design was drawn from the sleek interface of Linkedin profiles. Ho ...

htmlcss

Issues with Laravel 8's datatable scripts causing dysfunction

In my practice with the AdminBSB template, I am facing an issue where the Jquery datatable plugin JS is not functioning properly in my blade template. I aim to achieve a datatable layout similar to this example: https://i.sstatic.net/krfPl.jpg However, t ...

javascriptphpcsslaravellaravel-blade

Steps to align table next to the paragraph tag

I am facing an issue trying to align a table inline with the p tag in my HTML code. I have attempted to make minimal changes to achieve this, but it is not working as expected. Here is the code I have tried: <p>ABCD</p> <table style = displ ...

htmlcss

At the ready stance for a particular grade of students attending a class

I have created a page with a navigation menu that can be scrolled using the wheel mouse. My goal is to ensure that the li item with the 'selected' class is always positioned in the first position on the left. Is there a way to achieve this using ...

javascriptjqueryhtmlcss

Difficulty with Bootstrap Carousel (image is displayed but fails to transition/change)

Although I don't have much experience in this, I've searched through various documentations and solutions that have helped others. Unfortunately, I haven't been able to fix my issue, so I decided to create my own post to seek assistance. &l ...

cssangularcarousel

` `Display issue: Internet Explorer 11 concealing element with scroll bar

I encountered an issue on Internet Explorer 11 where I am unable to click on an element that is positioned fixed and aligned to the right; the scroll bar hides the element. I am using the Bootstrap framework. Any suggestions? https://i.sstatic.net/TqDi ...

htmlcssinternet-explorer-11