Introduction
A set of universal CSS guidelines forms an integral component of the design system, aiming to standardize browser defaults. Teams do not need to provide their own CSS normalization as the design system's CSS eliminates the need for additional defensive CSS to accommodate discrepancies in normalization code across products upon integration. The global normalization directives align with modern standards by establishing elements' foundational styles to suitable defaults instead of completely resetting element styles.
Why do we need to normalize CSS?
Various HTML elements receive unique styling from each browser based on their individual default configurations. When websites lack personalized CSS, the appearance may vary across different browsers due to the diverse default styles, commonly referred to as user-agent styles. To address this, web developers must account for these default styles and guarantee their efficient override, particularly when implementing custom CSS. To streamline this process and minimize errors, developers often reset or normalize these user-agent styles by employing a series of foundational CSS regulations before introducing any CSS that defines the website's appearance.
Global defaults
Some globally defined defaults that we have included in our normalization rules will affect the entire application after the CSS is imported. These defaults consist of (but are not restricted to) the following:
- Box-sizing, border-box is enabled for all elements, including :: before and :: after. This makes sure that padding or borders never cause an element's defined width to be exceeded. Although teams were already using this common CSS reset, some teams may have surprising outcomes. To restore the previous behavior of an element, it might be necessary to explicitly set it to box-sizing: content-box (the browser default) if the space around it changes.
- With its definition of font family, font size, line height, and color, the <body> element takes the position of the .ds-base class. Moreover, the background supplied by a theme is now the background-color that <body> sets.
- On elements that have tabindex="-1" defined, the outline is eliminated. When a skip link is activated, for example, the emphasis is shifted to a <main> or heading element, and the focus rings for non-interactive components are removed.
- To honor the preferences of users who have enabled prefers-reduced motion, animations, transitions, and smooth scrolling are disabled on all elements, including :: before and :: after.
- Although teams were already using this common CSS reset, some teams may have surprising outcomes. To restore the previous behavior of an element, it might be necessary to explicitly set it to box-sizing: content-box (the browser default) if the space around it changes.
- Moreover, the background supplied by a theme is now the background-color that <body> sets.
Typography
Headings
The font inherit property will propagate the font properties defined by its parent element to all heading elements.
The font property serves as a convenient way to specify various font styles. It's crucial to note that a heading element will adopt the font family and font size of its containing element, known as the <body>. This principle guarantees the distinction between the semantics and appearance of a heading. For assistance with heading styling, refer to our headers or utility class documentation.
Links
Links operate in the same manner as previously, with a single modification: text-decoration-color is now established as currentColor. This adjustment presupposes that all underline styles for links will uniformly match the text color, irrespective of the linked text's state.
Lists
The <ol> and <ul> components have been styled in a similar manner to the .ds-c-list component, except for one significant difference: they leverage flexbox to enhance the layout of commonly used inline list patterns and offer greater precision in managing the spacing between list items. In case you require an inline list, you have the option to include flex-direction: row within your project. Similarly, you can customize the gap to suit your project's requirements if the default spacing between list items does not meet your preferences. In essence, utilizing Flexbox provides more adaptability in adjusting list spacing compared to relying solely on the default browser settings.
Include a role="list" attribute in a particular list to maintain its unstyled appearance. This functionality enables you to eliminate the default normalization styles of the design system and implement additional CSS to eliminate the default browser styling.
Form elements
For simpler base styles, certain form elements have been redesigned. These are a few of the more noticeable adjustments:
- Using the font: inherit rule, the font styles provided by their parent element are applied to the <input>, <button>, <textarea>, and <select> components.
- Checkboxes and radio buttons are colored with an accent color (configured to a theme's specified "checked" color). This ensures that, even if you don't utilize our choice component, the checked status of these inputs fits the theme of your website.
- Since <fieldset> lacks a border, margin, and padding, it is simple to use them as wrappers for single or multiple inputs.
Conclusion
CSS normalization, which entails establishing a default style for a particular element, serves to maintain uniformity across browsers that may display content differently. This standardization helps bridge any layout discrepancies, ensuring a consistent appearance across all platforms. By implementing normalization, inconsistencies among browsers are addressed, fostering a more cohesive development environment for programmers. Consequently, CSS normalization fosters enhanced consistency across various browsers and websites, resulting in improved user experience and facilitating web development maintenance.