Definition: CSS Specificity
Css uses specificity to determine how an element is rendered by the browser. The browser will apply a specificity score to every selector and then weigh those scores to determine how that is rendered. In the case of a tie in specifity scores, then the last line of css wins. Which ever code is found lower on the CSS will break the tie. When styling link pseudo-classes, order is important. Link psedo-classes must be styled in the following order: link, visited, hover, focus, then active. If the link pseudo-classes are not styled in this order, then each preceeding style may not properly override the other.
Contrast Ratios Explained
Contrast ratios are calculated from the color of the text against the color of the background. These ratios are set to ensure the minimum level of contrast for accessabily for users with visual impairment. There are two contrast levels that are currently set for accessability compliance. They are AA and AAA. The ratios are 4.5:1 and 7:1 respectively.
Why is it important to meet contrast ratios?
Primarily, contrast ratios are set to ensure the accessibility of every user including those with visual impairment. This is dictated by federal regulation. Secondarily, it benefits all users by allowing sites to be more dynamic in low or bright light situations, and use on smaller devices. It also ensures that a site can capture a larger target audience by ensuring accessability for all users.
What group sets accesibility rules?
The Web Accessability Initiative of W3C is the group that sets the accessability rules.They are currently working on the WCAG 2.2 or Web Content Accessability Guidelines version 2.2. These guidelines should be finalized in 2023. The current guidelines version 2.1 was published in 2018.
Summary
The purpose of this weeks learning was to understand how code is rendered by the browser and how the browser determines specificty values to determine this. It also was to understand how code can override other code based on order of appearance on the CSS. This includes pseudo-classes for links as well. The other important piece of understanding was the importance of accessability when coding and how to determine if code is meeting the minimum requirements of color ratios.