Language Features

Despite the classification of CSS as a programming language, we can probably agree that using CSS + HTML for general programming tasks wouldn’t be particularly convenient. That is because this really isn’t the point of CSS (or HTML).

See Chapter 2 for a more in-depth exploration of the CSS language features and Chapter 7 for more on CSS precompilers.

Structure

It is important to note that CSS is a declarative language rather than an imperative one. This means that rather than writing code that tells a web browser how to apply styles to a page, we instead tell the browser what styles to apply and where to apply them. These declarations are called rulesets in the specification, but may be referred to simply as rules.

Each rule in CSS is comprised of one or more selectors and one or more declarations, as shown in Figure 1-1.

Each declaration is made up of a property-value pair. As of this writing, the CSS Working Group listed 564 possible properties. Each property must be supported by the user agent (typically a web browser) for it to have any effect. Unsupported properties are simply ignored.

Rulesets may be further grouped and modified by at-rules such as @media or @supports and are collected into style sheets. A style sheet is simply a text file with a .css extension that contains any number of rules which describe the presentation of a document or web page.

Separation of Concerns

The term separation of concerns is credited to Edsger Dijkstra⁴ and refers to the idea that it is very helpful for us to focus on one aspect of a problem at a time. As shown later in the “Web Architecture” section, a web application separates content, style, and actions and even uses different technologies for each of these concerns.

Looking at separation of concern as it pertains to CSS, what are some of the concerns we might find in a ruleset? As shown in Figure 1-2, we see that layout, theme, typography, and interaction are all aspects of a web page that can be controlled using CSS. See Figure 1-2.

Now, let’s say you have a style sheet with 20,000 rulesets. This is clearly unmanageable and these rulesets need to be split into multiple files. How do you determine how many files you need and which rulesets go into each file? One approach is to split files based upon concern (e.g., layout vs. theme), while another approach would be to group rulesets based upon the specific components to which they apply. This question is quite fundamental to the discussion of different CSS architecture models in Chapter 10.

Two of the most widely accepted principles of software architecture, cohesion and coupling, serve to better define the idea of separation of concerns. These metrics were first published in Structured Design⁵ and have since become standards in software engineering.

Nontechnical Factors

In order to exercise separation of concerns, we must first practice the art of breaking down complex and challenging problems into simpler pieces. Often we find that seemingly impossible tasks are simply large accumulations of a great many simple tasks. In learning to see the individual pieces, we now have the building blocks that we need to create solutions.

Beyond the technical aspects of software architecture, there are practical considerations that must weigh into our decisions.

Best Practices

It is important to acknowledge that the study of architecture revolves around defining solution patterns for common problems, but also that there is no absolute answer. No single approach is always right and no single decision will work in all cases. Practicing architecture is all about understanding your available options, weighing the positive and negative outcomes of each one, and then making a decision. Documenting these decisions, and the reasoning that went into them, is another important part of being an architect. It’s essential that we – and others – can learn from both our successes and our failures.

There are a series of practices that are generally good defaults in decision making. Not that they are always the right answer, but that using them absent any compelling reason to the contrary will generally produce good results.

HTML

There are a large number of CSS features that are simply not available using inline styles, including most of the at-rules. Additionally, this “breaks” cascading and inheritance, which is described in more depth in Chapter 3.

The fact that an HTML document must specify its own style sheets implies an authoritative relationship from the document to the style sheet. A style sheet does not get to specify what documents it belongs to, but it can specify selectors and conditions that determine the situations where rules get applied to a document, a concept which gets expanded upon in the following chapters.

Because of the relationship between CSS and HTML, it is important to understand the structure and vocabulary of HTML documents as outlined in Figure 1-4.

As illustrated earlier, HTML is made up of tags which are demarcated by angle brackets. An HTML element refers to the entire content of a tag, from the first angle bracket of its opening tag to the last angle bracket of its closing tag. Some elements, such as <img>, have no body and thus no closing tag. Some elements, such as <div> or <button>, may contain text or even other tags between their open and closing tags. All tags may have attributes such as ID, class, or title. Some tags have mandatory attributes, which are required to be considered valid.

There are CSS selectors for tags, attributes, and values, which will be covered in detail in Chapter 2. One thing worth noting here is that some HTML tags exist primarily to provide semantic context.

For example, <div> can be used to group any arbitrary set of tags, but all this communicates is a generic division or grouping. The <nav> tag indicates navigation, <article> indicates independent and self-contained content, and <aside> indicates related but secondary content, much like the preceding Note. This additional meaning is helpful for user agents and screen readers, but can also be used within our CSS to write more robust and meaningful selectors.

Document Object Model

The Document Object Model (DOM) is the relationship tree built by a user agent which describes the entire document from one or more sources including HTML, JavaScript, and CSS. The DOM specification includes an API for access and manipulation by JavaScript and each HTML element and attribute map onto the DOM as illustrated in Figure 1-5.

Every item in the DOM is called a node. A node may be an element, attribute, or text, reflecting the underlying HTML. Also like HTML, elements have attributes. All of these can be read and modified directly using JavaScript for dynamic web pages.

Note that CSS doesn’t factor into the DOM directly. However, it is possible to use the DOM to alter visual output by directly modifying the class or style attributes. Looking back at Figure 1-5, we see that the DOM provides the structure that the Style Engine applies the CSS to when producing a layout.

Creation of CSS

Affecting the visual style of a web page was a known problem from the very beginning of the Web. Initially some basic visual controls were built into HTML, but problems with this approach were quickly identified. As mentioned at the beginning of the chapter, many people proposed, and even implemented, mechanisms for styling the Web, and during this time Håkon Wium Lie proposed the idea of CSS. Together with Bert Bos, he developed a proposal which was submitted to the newly formed W3C.

Lie and Bos went on to found the first W3C CSS Working Group along with Chris Wilson and Vidur Apparao, with Chris Lilley as the first WG Chair. The CSS level 1 recommendation was published 2 years later in 1996.

Early Adoption

Before CSS was to become a well-known and proven technology, a few early web sites would need to take the plunge and update their old HTML3 web sites with inline styles to a more “pure” CSS-based layout and theme.

While Wired was making their big announcement, another team at ESPN was working hard on their new web site. Announced just 4 months later, their big victory was the (nearly) tableless layout.²⁵ By proving that building sites with CSS-based (instead of table-based) layouts could work for sites receiving millions of monthly pageviews,²⁶ these two web sites helped solidify the place of CSS as a powerful web standard.

Early Advocates

Without early advocates to inform and educate web developers, we might have a very different Web today. A large number of developers, including the authors of this book, were educated and inspired by these advocates, and this book does not stand alone but builds upon their years of work.

CSS Today

The CSS Working Group at the W3C is still going strong under fantastic leadership. The current modular approach to CSS level 3, along with a new trend of evergreen browsers, has led to a steady pace of progress. The following are a handful of active and influential people who, in addition to many of those already mentioned, are continuing to improve the state of CSS.

Basics

The basic selectors allow elements to be selected based upon their obvious qualities as rendered in HTML: tag names, attributes, and class names. The CSS selector syntax is so expressive that there is a DOM function querySelector which accepts a CSS selector string to locate elements in the DOM tree. See Chapter 8 for more about JavaScript.

Universal Selector

The * in CSS is a universal selector that matches every element on the page. Sometimes this can be helpful, such as Listing 2-1 and Figure 2-1, which adds a visible indicator to any element selected with the keyboard.

*:focus {

  outline: 1px dotted grey;

}

Listing 2-1

Outline Selected Elements

However, this convenience comes at a cost – the universal selector effectively short-circuits inheritance for the associated declarations.

Unless you have a specific use case, it’s generally best to avoid the universal selector in favor of inheritance. It’s also a good idea to use the universal selector in combination with other selectors.

One use case for the universal selector is to apply a declaration to all children of another element, even if that property wouldn’t be inherited, such as a border. For this use case, consider either custom properties or mixins as an alternative to this approach.

Type Selector

Selecting an element in CSS can be as simple as using the tag name. This is called the type selector , and all HTML tags are valid selectors.

The example in Listing 2-2 and Figure 2-2 adds padding to all paragraph elements.

p {

  padding: 0.5rem;

}

Listing 2-2

Add Padding to Selected Elements

Class Selector

To select an element by its class, simply use a dot followed by the class name, such as .example. Since an HTML element can have multiple classes, multiple class selectors may be combined, and they can also be combined with element selectors. See Listings 2-3 and 2-4. Output is shown in Figure 2-3.

<body>

  <div>

    <p>Lorem Ipsum...</p>

    <img class="outline" src="image.png" alt="art">

    <button class="outline">Cancel</button>

    <button id="ok" class="outline bold">OK</button>

  </div>

</body>

Listing 2-3

Selector HTML

img {

  width: 200px;

}

button {

  background-color: lightblue;

}

button.outline {

  border: 1px solid green;

}

button.outline.bold {

  border: 5px solid darkgreen;

}

Listing 2-4

Class Selector CSS

In this example, the <img> element does not receive a border due to the type selector. The OK button has a thicker, darker border than the Cancel button.

ID Selector

The ID selector # selects an element based upon its ID attribute. Note that the use of duplicate IDs on a single page is not valid for HTML, so this selector is expected to match either 0 or 1 elements. The example in Listing 2-5 uses the HTML from the previous example in Listing 2-3. Figure 2-4 illustrates the output.

img {

  width: 200px;

}

#ok {

  font-size: 1.5rem;

  font-weight: bold;

}

p#ok {

  color: pink;

}

Listing 2-5

ID Selector CSS

This will make the button text bold on the OK button. The example shows that the ID selector may be combined with type selectors in the same way as the class selector. By combining these selectors in a way that doesn’t match the HTML, the contents of the paragraph tag will not become pink in this example.

Attribute Selector

The attribute selector matches an element based upon one of its attributes. This selector uses square brackets to contain the attribute match and may be optionally combined with a type selector. For example, a [rel] can be used to match all anchor tags with a provided relationship. To allow <area> tags to also match, use [rel] by itself.

In addition to testing for the presence of an attribute, this selector can test for specific values as shown in Listings 2-6 and 2-7 and Figure 2-5.

<body>

  <h1>Attribute Selector</h1>

  <form>

    <button href="" title="go back">

      <i class="material-icons">arrow_back_ios</i>

      Previous

    </button>

    <label>

      Username

      <input type="text" >

    </label>

    <label>

      Password

      <input type="password" >

    </label>

    <label>

      Avatar

      <input type="file" accept="image/png">

    </label>

    <button href="" title="Continue">

    Next

    <i class="material-icons">arrow_forward_ios</i>

    </button>

  </form>

  <blockquote cite="w3.org">

    The World Wide Web Consortium (W3C) is an...

  </blockquote>

  <blockquote cite="https://en.wikipedia.org/wiki/Wikipedia">

    Wikipedia is a multilingual online encyclopedia...

  </blockquote>

  <a href="myfile.pdf" download>PDF File</a>

  <a href="myfile.docx" download>Word Doc</a>

</body>

Listing 2-6

Attribute Selector HTML

label, input, a, button {

  display: block;

  margin-bottom: 1rem;

}

button {

  display: flex;

  align-items: center;

}

/* Matches password input fields */

input[type="password"] {

  color: red;

}

/* Strikes out any quotes cited from Wikipedia */

blockquote[cite*="wikipedia.org"] {

  text-decoration: line-through;

}

/* Underlines any element with a title attribute containing

   the word "continue" with any Capitalization.

*/

[title*="continue"] i {

  text-decoration: underline;

}

/* Display a gray border around any input which has an

   accept starting with image, such as image/png

*/

input[accept^="image"] {

  border: solid 4px gray;

}

/* Display a PDF icon beside any .pdf download links */

a[href$=".pdf"]::before {

  content: url(icon-pdf.png);

}

/* Matches a material design icon such as <i class="material-icons">arrow_back_ios</i> */

i[class|="material-icons"] {

  color: blue;

  width: 32px;

}

Listing 2-7

Attribute Selector CSS

Because class and ID are both HTML attributes, the class and ID selectors have attribute selector equivalents, shown here in Table 2-1.

Table 2-1

Attribute Selector Equivalents

	Basic Selector	Attribute Selector
Select by ID	#contactForm	[id=contactForm]
Select by Class	.outline	[class~="outline"]

Grouping

To minimize duplication of declaration blocks, selectors can be grouped together into a comma-delimited list. For example, a, button { ... } would apply the declaration block to both anchor and button elements in the HTML.

Combinators

<body>

  <h1>Combinators</h1>

  <nav>

    <ul>

      <li><a href="">Home</a></li>

      <li>

        <a href="">Combinators</a>

        <ul>

          <li>" " (space)</li>

          <li>></li>

          <li>~</li>

          <li>+</li>

        </ul>

      </li>

    </ul>

  </nav>

  <main>

    <h2>List of Combinators</h2>

    <p>There are a few other combinators to make this...</p>

    <ul>

      <li>

        " " (space)

        <ul>

          <li>nav li</li>

          <li>nav a</li>

        </ul>

      </li>

      <li>></li>

      <li>~</li>

      <li>+</li>

    </ul>

    <p>By combining selectors together we can select...</p>

  </main>

</body>

Listing 2-8

Combinators HTML

nav a {

  display: block;

  margin: 0 1rem;

}

nav > ul > li {

  border: solid 1px gray;

  display: inline-block;

  list-style-type: none;

  vertical-align: top;

}

p ~ p {

  color: purple;

  font-weight: bold;

}

h2 + p {

  font-family: sans-serif;

}

Listing 2-9

Combinators CSS

By combining selectors together, we can select elements to style based upon their natural location and ordering within an HTML document. This can help us separate concerns between layout, theming, and content for more manageable rulesets.

Pseudo Elements

Pseudo elements allow you to select elements that do not exist within the HTML document, but show on the screen visually. Both ::first-letter and ::first-line select a portion of text within an element.

While the effect of ::first-letter could be reproduced by adding a <span> tag around the desired letters, for fluid layouts there is actually no other way to select the entire first line of a text block than ::first-line. This is because this rule is applied after the layout has been calculated so that the browser knows which words should be affected by the rule. See Listings 2-10 and 2-11 and Figure 2-7.

<body>

  <h1>Pseudo Elements</h1>

  <p>Lorem ipsum dolor sit amet, consectetur...</p>

  <p>Cras id blandit risus. Nunc dictum, elit...</p>

  <p>Quisque euismod tempus erat, sit amet pharetra...</p>

</body>

Listing 2-10

Pseudo Elements HTML – ::first-line and ::first-level

p::first-letter {

  color: red;

  font-size: 3rem;

  line-height: 0;

  display: block;

  float: left;

  margin-top: .125rem;

  margin-right: .5rem;

}

p::first-line {

  color: red;

}

Listing 2-11

Pseudo Elements CSS – ::first-line and ::first-level

The ::after and ::before pseudo elements use the content property to insert content (either text or an image) based upon specific criteria. We see this in action in Listings 2-12 and 2-13 and Figure 2-8.

<body>

  <a href>First Link</a>

  <a href>Second Link</a>

  <a href>Third Link</a>

</body>

Listing 2-12

Pseudo Elements HTML – ::before and ::after

a {

  display: block;

}

a::before {

  content: url(link.png);

  display: inline-block;

  margin-right: .5rem;

  vertical-align: middle;

}

a::after {

  content: ' (link)'

}

Listing 2-13

Pseudo Elements CSS – ::before and ::after

Have you ever wanted to customize the placeholder text on an input element? You can do that with input[type=text]::placeholder (see Listings 2-14 and 2-15 and Figures 2-9 and 2-10).

<form>

  <label>

    Username:

    <input type="text" placeholder="Example: user@email.com">

  </label>

</form>

<video width="100%" height="250" controls>

  <source src="" type="video/mp4">

</video>

Listing 2-14

Pseudo Elements HTML – ::placeholder, ::selection, and ::backdrop

input {

  box-sizing: border-box;

  border-radius: 4px;

  border: solid 1px gray;

  padding: .5rem 1rem;

  font-size: 1rem;

  width: 100%;

}

input[type=text]::placeholder {

  font-family: cursive;

}

::selection {

  background-color: cornflowerblue;

  color: white;

}

::backdrop {

  background: cornflowerblue;

}

Listing 2-15

Pseudo Elements CSS – ::placeholder, ::selection, and ::backdrop

Have you selected text on a web site and noticed that the selection highlight was in the site’s brand colors? This can be accomplished with *::selection {background-color: cornflowerblue}.

The background in full-screen browsing mode can be customized using ::backdrop.

Both are also seen in the preceding example.

Pseudo Classes

Pseudo classes select elements based upon information that is not available in the HTML document. This may include state or context metadata.

Displaying tabular data with beautiful formatting is made easy with the positional pseudo classes. Select the first and last rows of a table with tr:first-of-type and tr:last-of-type, respectively. Use the same technique to select the first and last columns using <td>. Highlight every other row using tbody > tr:nth-child(even).

Another important pseudo class is the :not() selector, which select elements that do not match a list of selectors. While many of the pseudo classes have their inverse state defined (e.g., :optional vs. :required), there are many other scenarios where negation can be useful. For example, you can select every direct child tag of an <article> that is not an <img> by using article > *:not(img) { ... }.

Many of these pseudo classes provide capabilities to CSS that would otherwise require JavaScript involvement in designing the user experience. By leveraging CSS for context-sensitive UI implementation, we keep application and view logic separate, improving the maintainability and performance of our web sites and web applications. Examples of some of the previously mentioned pseudo classes can be found in Listings 2-16 and 2-17 illustrated in Figure 2-11.

<body>

  <h1>Pseudo Classes</h1>

  <table>

    <thead>

      <th>Name</th>

      <th>Email</th>

      <th>Zip Code</th>

    </thead>

    <tbody>

      <tr>

        <td>Jane</td>

        <td>jane@email.com</td>

        <td>15978</td>

      </tr>

      <tr>

        <td>John</td>

        <td>john@email.com</td>

        <td>11458</td>

      </tr>

      <tr>

        <td>Alex</td>

        <td>alex@email.com</td>

        <td>68978</td>

      </tr>

    </tbody>

  </table>

  <form>

    <label>

      Name:

      <input type="text" maxlength="20" required>

    </label>

    <label>

      Email

      <input type="email" maxlength="100" required>

    </label>

    <label>

      Zip Code:

      <input type="number" max="99999">

    </label>

    <button type="submit">Submit</button>

  </form>

</body>

Listing 2-16

Pseudo Classes HTML

table {

  border-collapse: collapse;

  margin-bottom: 1rem;;

  width: 100%;

}

tr {

  border-top: solid 1px lightgrey;

  border-bottom: solid 1px lightgrey;

}

tbody tr:nth-last-of-type(odd) {

  background: lightblue;

}

th, td {

  padding: .5rem 1rem;

  text-align: left;

}

form {

  margin-top: 2rem;

}

form > *:not(button) {

  border-radius: 4px;

  box-sizing: border-box;

  display: block;

}

label {

  margin-bottom: .5rem;

}

input {

  border: solid 1px lightblue;

  padding: .5rem 1rem;

  width: 100%;

}

input:hover, input:active {

  border-color: slategray;

}

input:invalid {

  border-left: solid 5px red;

}

input:valid {

  border-left: solid 5px green;

}

button {

  padding: .5rem 1.5rem;

  border: solid 1px lightblue;

  border-radius: 3px;

  background: white;

  margin-top: .5rem;

}

button:hover, button:active {

  outline: dotted 1px blue;

  outline-offset: 2px;

}

Listing 2-17

Pseudo Classes CSS

Properties

The properties in CSS refer to the various aspects of layout and style that can be affected. Many properties are available for some elements and not others. Sometimes the visibility of a property will depend upon the display setting of an element. For instance, the height property is ignored on elements with display: inline, but is rendered on display: inline-block.

Each of the individual border properties is available as an optional value parameter to the border shorthand property. Some of the other shorthand properties include background, box-shadow, font, padding, margin, and outline. Each of these has a different list of properties they summarize, and they have a specific order in which the properties should be provided. Be sure to check a reference when using these until you become comfortable with the syntax of each.

The outline property is very useful for highlighting elements on the screen where you do not want the item to reflow. This is commonly used to highlight elements in combination with the :focus pseudo class. See Chapter 4 for details of the box model, as well as on properties related to layout, including display, grid, and flex.

A comprehensive review of the available CSS properties and values is outside of the scope of this book. For an excellent reference, we recommend the MDN CSS Reference from Mozilla, which can be found at https://developer.mozilla.org/docs/Web/CSS/Reference.

Units

There are a number of CSS properties that expect a <length> data type. This length is a scalar (numeric) value with an associated unit of measure. Selecting the correct units can make the difference between a nice fluid, responsive layout and one that breaks anytime the user resizes the window or zooms. The correct units can also have a tremendous impact on the amount of work it takes to achieve certain layouts.

There are three basic categories of units that we’ll discuss. The first category includes absolute measures that are established at the time of the design. The second category is font-relative, meaning that if the user zooms the page or changes their default font size, the meaning of these values will change relative to one another. And the third category contains viewport-relative lengths, meaning they will change relative to the browser size or the specific display on the user’s device.

Functions

While CSS does not allow user-defined functions, there are a large number of available functions to perform a variety of tasks, some of which are described as follows:

Shape – There are a number of nonrectangular shapes supported through the functions circle(), ellipse(), inset(), and polygon(). Combine with the shape-outside property to wrap text to a specific shape, or with clip-path to crop an image or container.

Transformation – There are a large number of transformation functions, including rotateX(), scale(), and skewY(). There are also 3D transformations such as perspective(), matrix3d(), and scaleZ(). These transformations can adjust the shape, orientation, and position of elements on the screen to create a wide range of visual effects and layouts.

Gradients – There are a large number of functions to support the creation of gradients, including linear-gradient(), radial-gradient(), repeating-linear-gradient(), and repeating-radial-gradient(). The blending of colors enabled by gradients supports a large number of visual effects.

Effects – There are other visual effects beyond just gradients. The blur() function will produce a Gaussian blur on the selected element, even an image. This can be useful for the backdrop of a modal dialog. The drop-shadow() adds some dimension to a theme. And opacity() allows elements to be somewhere between fully opaque and fully transparent, to allow dimensional overlays. (Note that if you want opaque text but a semitransparent background, you may want to consider using the rgba() or hsla() color functions as described in the following text.)

Color – The most common way of specifying color in CSS is with the 3- or 6-digit hex code preceded by a hash symbol, such as #FF0000 for the color red. Colors can also be specified by hue, saturation, and lightness using the hsl() and hsla() functions, or as RGB (red, green, blue) using rgb() or rgba(). The “a” in each of these function sets refers to the alpha channel which specifies level of opacity or transparency.

Colors can also be manipulated in a consistent fashion using the filter property with alterations such as contrast(), saturate(), and hue-rotate() and effects applied such as grayscale() or sepia(). These functions are particularly useful because they can apply to an image as well as text on the page.

Resources – The url() function is used to add image resources to a design through CSS. This allows the <img> tag in HTML to be reserved for images that are relevant to the content, rather than to the layout and design.

Counting – The counting functions counter(), counters(), and symbols() are used to manage counter variables. See more about counters in the following “Variables” section.

Math – Sometimes the built-in units aren’t enough and you need to calculate size or position based upon other elements. The calc() function makes it possible to do some basic math with a mix of units. Addition, subtraction, multiplication, and division are supported along with parentheses. As an example, you could use height: calc(10vh - 1rem) to calculate the height of a header that was 10% of the viewport height, but accounted for a 1rem border.

Listings 2-19 and 2-20 show the source code for Figure 2-12.

<body>

  <h1>Functions</h1>

  <div class="shape"></div>

  <div class="shape"></div>

  <div class="shape"></div>

</body>

Listing 2-19

Functions HTML

.shape {

  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

  display: inline-block;

  position: relative;

  height: calc(100vw / 3);

  width: calc(100vw / 3);

}

.shape:nth-of-type(1) {

  background: rgba(255, 0, 255, 0.31);

  transform: rotate(-25deg);

  filter: saturate(15%);

}

.shape:nth-of-type(2) {

  background: rgb(255,116,0);

  background: linear-gradient(90deg, rgba(255,116,0,1) 0%, rgba(255,237,0,1) 47%, rgba(255,167,0,1) 100%);

  filter: opacity(.75);

  transform: translate(0, -50px);

  left: calc((100vw / 3) - 200px);

}

.shape:nth-of-type(3) {

  background: hsl(189, 100%, 50%);

  transform: rotate(25deg);

  opacity: .33;

  left: calc((100vw / 3) - 100px);

  top: -200px;

}

Listing 2-20

Functions CSS

The example shown in Figure 2-12 highlights a number of functions. The position of the stars in the example is dependent upon the size of the browser window since calculations are based upon the vw and vh units.

Variables

There are a few ways to use dynamic data within CSS (examples found in Listings 2-21 and 2-22 and Figure 2-13):

Custom properties – These variables are defined much like any other CSS property and can contain any value that would be legal in CSS. They can then be referenced later in a style sheet using the var() function.

Attributes – Using the attr() function , you can pull in the value from an HTML attribute. Combine this with the content property to display attribute data in unique ways.

Counters – Every HTML element can have 0 to many named counters associated within the document tree and manipulated using CSS. HTML lists generate a “list-item” counter automatically, incrementing by 1 with every list element unless explicitly reset. This also includes unordered lists. Use counter-set, counter-increment, or counter-decrement properties to adjust the counters and use counter() or counters() to display the value of a named counter in a way you choose. This exists to support nested lists, but may have many other uses.

<body>

  <h1>Variables</h1>

  <ul>

    <li category="fruit">Apple</li>

    <li category="vegetable">Lettuce</li>

    <li category="starch">Corn</li>

  </ul>

</body>

Listing 2-21

Variables HTML

ul {

  counter-reset: li;

}

li:before {

  content: counter(li)"-" attr(category)": ";

  counter-increment: li;

  text-transform: capitalize;

  background: lightblue;

  display: inline-block;

  padding: .5rem 1rem;

  border-radius: 25px;

  margin: 0 1rem 1rem 0;

}

Listing 2-22

Variables CSS

@import

In Chapter 1 we looked at three ways to include CSS in an HTML document, including the <link> element. The @import at-rule provides a similar function for CSS. Both of these include pull mechanisms in a CSS file, effectively inserting its contents at the position of the import statement.

This is very useful as it allows us to break up style sheets into more logical and manageable files without any impact on the HTML document. See Chapter 7 for a more in-depth discussion of @imports along with other mechanisms for pulling in external style sheets.

@supports

The @supports at-rule allows rules to be applied based upon specific support of CSS features by the user agent. This is a way to provide styling and formatting based upon what a web browser declares support for, rather than using old-school hacks in an attempt to detect if a given rule will work as expected.

Because text-underline-offset is supported by Firefox (Figure 2-14), Firefox ignores the @support not code. Opera, however, at the time of the writing of this book, does not support text-underline-offset and therefore uses the fallback code provided in the @supports not (Figure 2-15).

@media

The CSS media at-rule is used to perform queries against the system, environment, or user agent. This use is called a media query .

Additional control over printing can be obtained by providing page-specific instructions using the @page at-rule.²

Global Values

Inherit, unset , and initial are a little different from the rest of the property values available in CSS. These values are available on all properties and have the distinct difference of either resetting a value to default or to that of an ancestor rather than a new value. These values give you explicit control over how a property is inherited.

Unset

Unset works differently depending upon the property to which it is being assigned. If the value can be inherited from the parent, it will inherit; otherwise, it will set the property value to initial.

In the case of the list item, since font-family can be inherited, the second list item will have a font-family of sans-serif. The value is inherited from body, it’s parent container (see Figure 3-2).

Because padding is not inheritable, padding gets set to 0 on the second paragraph tag because the initial padding value on a paragraph tag is 0 (see Figure 3-3).

Initial

The initial value for a property may be set by the browser and can vary depending on the user agent. If an initial value is declared in the CSS specification, then initial should return that value. Most modern browsers are consistent but mileage may vary. For example, in Firefox the default value for font-family is serif . Therefore, the third list element font-family value is serif (see Figure 3-4).

Inherit

The property value will equate that of the parent’s property whether the property is by default inherited or not. Padding is not inherited. Even so, when inherit is set on the padding property of the fourth paragraph tag, the paragraph tag takes the value set to its parent <body>. Body has a padding value of 10px; therefore, the paragraph also does. See Figure 3-5.

As this example shows, we can force inheritance through the use of the inherit property, giving us direct control over the cascade.

Value Processing

The final actual values used for each property on each element are determined by a wide variety of factors external to your project code, including device, user agent or browser, user agent style sheet, and user-provided style sheet.

Box Sizing

Box-sizing , or the property that defines the height and width of an element, by default has a value of content-box which means that when a width and height is defined for an element, it is only applied to the content. Adding padding or margin to the element therefore increases the percentage width of the total available viewport that the element utilizes.

Content-Box

If a two-column layout, with each div equaling 50% of the width of the viewport, is desired, the amount of padding applied to each column needs to be subtracted from the width given to the element or the total width of both elements will exceed 100%.

Consider a viewport of 800px wide containing two divs. If no padding, margin, or border is added to the divs, and they are each given a width of 50%, their combined width will equal 100% of the viewport. If they are floated, they will sit perfectly side by side and take up 100% of the screen such as in Figure 4-2.

If padding is added to the columns, the width of the columns will increase by the padding amount, causing them to exceed the width of the viewport. Figure 4-3 shows the columns with added padding.

If the divs are floated, the second would therefore be pushed below the first as their combined width is now greater than 100% of the container such as seen in Figure 4-4.

In Code

Let’s take the earlier described scenario and put it in code (Listings 4-1 and 4-2; output shown in Figure 4-4).

<body>

  <h1>No Padding</h1>

  <div class="container">

    <div>

      <p>Content</p>

    </div>

    <div>

      <p>Content</p>

    </div>

  </div>

  <h1>With Padding</h1>

  <div class="container has-padding">

    <div>

      <p>Content</p>

    </div>

    <div>

      <p>Content</p>

    </div>

  </div>

</body>

Listing 4-1

HTML

.container { overflow:auto; }

.container > div {

  width: 50%;

  float: left;

}

.container p {

  background: rgba(0, 0, 0, .16); /* light grey */

  text-align: center;

}

.container > div:last-of-type p { /* second rectangle */

  background: rgba(0, 0, 0, .32); /* dark grey */

}

.has-padding > div {

  outline: dashed 1px rgba(0, 0, 0, .5);

  padding: 10px;

}

Listing 4-2

CSS

Border will behave the same way as padding; therefore, any border width applied will need to be included in the sum of content and padding to calculate the full width or height of the elements included in the layout.

Margin Collapse

Margins behave a little differently than padding. When sibling elements both have padding, padding from both is applied, and the space between the two elements is the sum of both sets of padding. Margin, however, depending on their context, can collapse. Margin collapsing is when top and bottom margins are combined or collapsed into a single margin equal to the largest of the margins applied such as in Figure 4-5 or, if all margins are negative, the size of the most negative margin. Left and right margins do not collapse.

Margins will collapse when

• There is nothing separating the margin of the parent and the margin of its child including padding, border, inline parts, block formatting context, or clearance property clear (e.g., clear: right, used with floats).

• Elements are adjacent siblings except if the latter needs to be cleared past floats (more about floats later in this chapter).

• Even when one of the margins is equal to 0.¹

In Code

When two divs with 10 pixels worth of padding each are set side to side, they will only have 10 pixels of vertical margin between them (as seen in Listings 4-3, 4-4, and Figure 4-6).

<body>

  <div>Content</div>

  <div>Content</div>

</body>

Listing 4-3

HTML

div {

 margin: 10px;

 background: rgba(0, 0, 0, .16); /* light grey */

}

div:last-of-type {

 background: rgba(0, 0, 0, .32); /* dark grey */

}

Listing 4-4

CSS

However, if we take the earlier example, where the columns have been floated and replace the padding for margin, notice that the margin does not collapse. The columns will still stack as their combined total width is greater than 100% [50 %  + (2 x 10px)] x 2 = 105%, but because the divs are floated, the margins do not collapse. See Figure 4-7.

Unlike border, which can be applied to any element regardless of type, both margin and padding have restrictions as to which elements they can be applied to. Padding cannot be set on elements whose display property value is

• table-row-group(<tbody>)

• table-header-group (<thead>)

• table-footer-group (<tfoot>)

• table-row (<tr>)

• table-column-group

• table-column

Margin cannot be set on elements with table display types (e.g., <tr>, <td>, etc.) except table, inline-table, and table-caption.²

Pros and Cons

Although the mixins pixels and percentage-based values can lead to some interesting math, the benefit of keeping the box-sizing value as content-box is that when a width or height value is assigned to the content, it will not be subject to side effects from the padding added. The content will be exactly the height or width it was assigned by the developer. Furthermore, because it is the default value, the element’s sizing will exhibit “normal” expected behavior without having to know anything about the other properties already set on the element.

Special Case: Outlines and Box Shadows

Outlines and box shadows, which create boxes around the border, could be thought of belonging to the box model. This is not the case because outlines and box shadows do not take up space. They overlay themselves, similarly to a position absolute as described in Figure 4-8.

The outline and box shadow not only overlap the content below but also bleed out of the viewport without the ability to scroll to it. Because they do not take up space, it does not constitute overflow, and the scroll bar is therefore not triggered. See Figure 4-9 and Listings 4-5 and 4-6.

<body>

  <h1>Outline</h1>

  <div class="container outline">

    <div>Content</div>

    <div>Content</div>

  </div>

  <h1>Box-Shadow</h1>

  <div class="container box-shadow">

    <div>Content</div>

    <div>Content</div>

  </div>

  <h1>Both</h1>

  <div class="container outline box-shadow">

    <div>Content</div>

    <div>Content</div>

  </div>

</body>

Listing 4-5

HTML

.container div {

  background: rgba(0, 0, 0, .16); /* light grey */

  height: 50px;

}

.container div:last-of-type {

  background: rgba(0, 0, 0, .32); /* dark grey */

}

.container.outline div:last-of-type {

  outline: dotted 15px rgba(0, 0, 0, .5);

}

.container.box-shadow div:last-of-type {

  box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, .5)

}

Listing 4-6

CSS

When both outline and box-shadow are set, they will overlap each other.

Border-Box

As described earlier, box-sizing: content-box has some disadvantages when mixins absolute units and percentage-based units. Content-box can also add extra complexity when setting content as a percentage of total width or height when the content has padding.

This is when border-box comes in. Assigning box-sizing: border-box changes how an element’s width and height is calculated. Instead of encompassing just the content, it takes in the content, padding, and border. When padding or border is added, the width and height of the content itself is therefore decreased. See Figure 4-10.

So if we take the first example of the two floated columns, we will see that the two columns retain a width of 50%. The margin still behaves the same way as with content-box. Listings 4-7 and 4-8 and Figure 4-11 show the same example as in Figure 4-4 using box-sizing: border-box instead of the default box-sizing: content-box.

<body>

  <h1>No Padding or Margin</h1>

  <div class="container">

    <div>

        <p>Content</p>

    </div>

    <div>

      <p>Content</p>

    </div>

  </div>

  <h1>With Padding</h1>

  <div class="container has-padding">

    <div>

      <p>Content</p>

    </div>

    <div>

      <p>Content</p>

    </div>

  </div>

  <h1>With Margin</h1>

  <div class="container has-margin">

    <div>

      <p>Content</p>

    </div>

    <div>

      <p>Content</p>

    </div>

  </div>

</body>

Listing 4-7

HTML

.container { overflow:auto; }

.container > div {

  width: 50%;

  box-sizing: border-box;

  float: left;

}

.container p {

  background: rgba(0, 0, 0, .16); /* light grey */

  text-align: center;

  margin: 0;

}

.container > div:last-of-type p { /* second rectangle */

  background: rgba(0, 0, 0, .32); /* dark grey */

}

.has-padding > div {

  border: dashed 1px rgba(0, 0, 0, .5);

  padding: 10px;

}

.has-margin > div {

  border: dashed 1px rgba(0, 0, 0, .5);

  margin: 10px;

}

Listing 4-8

CSS

Box-sizing is not inherited. It will need to be applied to all elements for which it needs to be changed.

Inline

*Deprecated

**Obsolete

When the content is displayed inline, by default elements go from left to right and set themselves side to side, width permitting. By default, elements, regardless of padding, and margin, will align themselves to the text baseline. If the width does not permit, the content will wrap below, as demonstrated in Figures 4-12 and 4-13 and Listings 4-9 and 4-10.

<body>

    I am some text.

    <span>I am a span.</span>

    More text goes here.

    <code>I am code.</code>

    And some more text.

    <a href="">I am an anchor tag.</a>

</body>

Listing 4-9

HTML

body {

  font-size: 24px;

  padding: 36px;

  margin: 0;

}

a {

  padding: 10px;

  outline: dotted 2px grey;

}

code {

  margin: 10px;

  outline: dotted 2px grey;

  outline-offset: 8px;

}

Listing 4-10

CSS

Block Elements

Also considered flow content, block elements stack atop one another unless they are affected by another property such as float.

Figures 4-14 and 4-15 show the default behavior for block-level elements.

By default, block-level elements will take the full width of the viewport. If a width is applied, even if there is still enough room inline of the element, the block element will still place itself below the previous. See Listings 4-11 and 4-12.

<body>

  <div>Content</div>

  <div>Content</div>

  <div>Content</div>

</body>

Listing 4-11

HTML

html, body {

  font-size: 24px;

  padding: 36px;

  margin: 0;

}

div {

  background: rgba(0, 0, 0, .16);

  height: 50px;

  margin: 20px;

  outline: dotted 1px gray;

  outline-offset: 19px;

  text-align: center;

}

div:first-of-type {

  padding: 20px;

}

div:nth-of-type(2),

div:last-of-type {

  width: 200px;

}

Listing 4-12

CSS

If an inline element is placed after a block element, the inline element will still be placed after the block element as seen in Listings 4-13, 4-14, and Figure 4-16.

<body>

  <div>Block Content</div>

  <span>Inline Content</span>

</body>

Listing 4-13

HTML

html, body {

  font-size: 24px;

  padding: 36px;

  margin: 0;

}

div {

  background: rgba(0, 0, 0, .16);

  height: 50px;

  width: 200px;

}

Listing 4-14

CSS

Inline-Block

Inline-block utilizes concepts from both block and inline. It will behave like a block element but flow with the surrounding content as if it were inline. A common use case for inline-block is horizontal navigation; see Listings 4-15 and 4-16 and Figure 4-17.

<body>

  <nav>

    <ul>

      <li><a href="">Home</a></li>

      <li><a href="">About</a></li>

      <li><a href="">Contact</a></li>

    </ul>

  </nav>

</body>

Listing 4-15

Inline-Block HTML

html, body {

  font-size: 24px;

  padding: 36px;

  margin: 0;

}

ul {

  margin: 0;

  padding-left: 0;

  background: lightgray;

}

li {

  list-style-type: none;

  display: inline-block;

  margin: 2rem;

}

a {

  padding: 1rem 2rem;

  background: white;

  border-radius: 2rem;

}

Listing 4-16

Inline-Block CSS

The default behaviors of inline, block, and inline-block elements are not enough to create the layouts often desired. Before such options as grid and flex were introduced in 2018 or float, introduced until 1996,⁶ we relied on tables even when the data was not tabular. For a long time, this was the only option in creating some more complex layouts, as even if the CSS specification described better methods, browsers did not necessarily support them. Today, this is no longer the case, and the use of tables for display purposes is now thoroughly frowned upon as it prevents assistive technologies from properly conveying the content being displayed to the users. Some exceptions, such as e-mail templates, still exist. Similarly to why historically they had been used for display purposes in web sites, most e-mail clients have little to no support for CSS layout properties, but the accessibility concerns remain and therefore tables for layout should be avoided whenever possible. For general web use, however, using tables for layouts is considered bad form and inaccessible. We are going to cover three commonly used patterns for laying out content: float, flexbox, and grid.

Float

Unlike flex and grid, float is not part of the display property, but a property in and of itself.

A great use case for float is when a figure is included within text, allowing text to flow around the figure such as in Figure 4-18.

And we are going to try to achieve the layout in Figure 4-19 .

Once the list items are floated, the border rises up over them, and our numbers from the left-hand column come set themselves to the left of it (Figure 4-20).

Continuing down the page, we can get close to the target layout (Figure 4-19) with floats (see Listing 4-20 and Figure 4-21); however, the column just doesn’t line up at the bottom of the screen. Centering the numbers in the left column to look evenly distributed when the window is resized and the content reflows doesn’t work either. Furthermore, since padding is used to center the numbers, if content was edited for a full sentence instead of a number, the padding would have to be recalculated or the text would no longer be centered.

html, body {

  padding: 36px;

  margin: 0;

}

h1 {

  text-align: center;

}

nav {

  border-top: solid 1px gray;

  border-bottom: solid 1px gray;

  display: flow-root;

}

nav ul {

  padding: 0;

  margin: 0;

}

nav li {

  box-sizing: border-box;

  list-style-type: none;

  float: left;

  padding: 1rem;

  text-align: center;

  width: 33.33%;

}

section {

  float: left;

  background: rgba(0, 0, 0, .16);

}

section div {

  box-sizing: border-box;

  color: white;

  background: rgba(0, 0, 0, .50);

  height: 100px;

  width: 100px;

  text-align: center;

  padding: 37px;

  margin-top: 5rem;

  margin-bottom: 5rem;

}

main {

  background: rgba(0, 0, 0, .05);

  box-sizing: border-box;

  padding: 30px;

  float: left;

  width: calc(100vw - 244px - 30%)

}

aside {

  box-sizing: border-box;

  background: rgba(0, 0, 0, .16);

  width: 30%;

  padding: 30px;

  float: right;

}

img {

  width: 100%;

  max-width: 250px;

  float: left;

  padding-right: 20px;

}

Listing 4-20

CSS for Figure 4-21

Getting the text around the image worked really well, as it is what float was designed to do. The rest of the layout had some issues, however. The padding and combination of a set height and width would more than likely make longer content expand out of its container in the far-left bar. Also of concern, 100% is not easily divisible by 3, so depending on how the browser decides to calculate the width of each nav element, content could be pushed around in ways it was not supposed to. Lastly the background on the columns just doesn’t line up.

For all of these reasons, this would be a bug-prone and hard-to-maintain layout. To achieve this layout, and have the UI be fluid, the use of tables, the CSS display: table property, and/or JavaScript would have been required before flexbox and grid were introduced.

Flexbox

Today we have flexbox. Solving those two problems is where flex really shines. Flexbox also allows for dynamically determining the width of the column based on the amount of content. Using display: flex is particularly useful when creating a layout that necessitates control over the spacing of elements across a container.

Dissecting the preceding layout, we apply flex to three areas of the layout, the three content columns, the navigation, and the far-left column itself. For both the far-left column and in the navigation, flex is used in order to distribute the content across their container vertically and horizontally, respectively.

Flex-Direction

Flexbox is applied on two axes: main and cross. The main axis defines the direction of the layout. The property flex-direction is used on the container and includes four options: row, row-reverse, column, and column-reverse, where row is the default. This will determine the order in which elements will be displayed and the direction of the layout (see Figure 4-22).

Flexbox will by default try to fit all of the content onto one line but can be made to let the content wrap by using the flex-wrap property. The flex-wrap property can take any of the following values (Figure 4-23):

• nowrap – This is the default. All items will be placed on one line following the main axis and cause overflow if necessary.

• wrap – Items will wrap from top to bottom.

• wrap-reverse – Items will wrap from bottom to top.

By adding to row, column, or wrap, we can alter the sequence in which elements are displayed. If we want to move a specific element in the sequence individually, we can use order. The property takes an integer, by default 0. If an element is assigned a 1, and all others are set to the default 0, it will appear at the end. If assigned a -1, the element will appear at the beginning. The order is therefore based on the sequence provided and then weighted based on values assigned to each element using the order property.

Justify-Content

To determine the position of each element across the main axis, we use justify-content on the container. Possible values are as follows:

flex-start – Elements are placed at the beginning of the container. Flex-start is the default value.

flex-end –Elements are placed at the end of the container.

center – Elements are placed at the center of the container.

space-between – Elements are spaced evenly across the container with no space between the edges of the container and the first and last items.

space-around – Elements are spaced evenly across the container with half as much space between the edge of the container and the first and last items as between the other items.

space-evenly – Elements are spaced evenly across the container with the same amount of space between the edges and the first and last elements and between the elements.

Inline-Block

Flex-start, middle, and flex-end have some advantages over inline-block. For many use cases, the use of display: inline-block in conjunction with text-align can achieve the same result; however, inline-block has some intricacies regarding spacing. Even when margins are set to 0, a small gap will appear between elements. A layout where the sum of the elements equals 100% of the width of the container therefore becomes challenging to create. Let’s look at the code and its output (Listings 4-22 and 4-23 and Figure 4-24).

Example 1

<body>

  <h1>Example 1</h1>

  <nav>

    <ul>

      <li>inline-block element</li>

      <li>inline-block element</li>

      <li>inline-block element</li>

    </ul>

  </nav>

</body>

Listing 4-22

Inline-Block HTML

html, body {

  padding: 12px 36px;

  margin: 0;

  font-size: 32px;

}

ul {

  padding-left: 0;

}

li {

  display: inline-block;

  padding: 10px 20px;

  background: grey;

  color: white;

}

Listing 4-23

Inline-Block CSS

Notice the gap between the inline-block elements. There is no margin on the list element. Flexed items do not suffer from this unintended behavior.

Align-Items and Align-Self

The cross-axis is perpendicular to the main axis. Looking back at our original flexbox example (Figure 4-24), we have three columns of content, the left number section, the middle content section, and the right aside. For each of them to have the same length, denoted by their respective background colors aligning at the bottom, we can use the align-content property. The values are as follows:

stretch – Elements will expand to the available height of the container (width if flex-direction is column).

For the purposes of columns, this behavior allows flexed elements to grow in size, similarly to a table row, so that all the elements included will have the same height as the latest in the array.

flex-start or start – Elements will align to the top of the container, similarly to vertical-align: top.

flex-end or end – Elements will align to the bottom of the container, similarly to vertical-align: bottom.

center – Elements will align to the middle of the container, similarly to vertical-align: middle .

baseline – Elements will align to the text baseline, similarly to vertical-align: baseline.

The preceding properties are set on the container and will apply to all elements within. To manipulate a single element and make it behave differently from the others, we can use align-self. Its values are the same as those available for align-items, listed earlier.

Grid

Grid-template-columns defines four columns. The first three of equal width and the last of 300px. The “fr” unit used here represents a fraction of leftover space as a ratio.⁷ The last column will be given a width of 300 pixels; the other three will receive equal amounts of leftover space as their width.

Grid-template-rows defines three rows, the first with height and last with height of 46 and 36 pixels, respectively. The middle row, set to auto, will adjust its height to accommodate its content.

Grid-template-areas defines, on the 4 by 3 grid just created, named areas by row as seen in Figure 4-25.

Note the “ . ” on the second row of the grid-template-areas for the container class; this allows for the three-column/second row grid section to remain empty.

Each UI element is set to its named grid-area. The advantage is the naming can follow the purpose of the container being positioned, making the code easy to read and then maintain. Furthermore, when repositioning elements for responsiveness, the only property that needs to be updated is the grid-template-areas .

Grid also allows for defining areas using column and row numbers. Numbering starts at 1 on the far left for columns and 1 on the very top for rows as depicted in Figure 4-27.

Grid-row and grid-column can be defined using a single integer (grid-row: 1) or two integers separated by a / (grid-row: 1/3). When only one integer is used, the section will start that the line specified and span one column or row such as for the main element in the example earlier. When two integers separated by a / are used, the section will start at the line specified by the first integer and end at the line specified by the second, as seen on the footer’s grid-column value.

Similarly to flexbox or table, the placement of content within a section can be adjusted. The justify-items property can be used on the grid container to determine how content within sections or cells will align left to right. Its values are start, end, center, and stretch as illustrated in Figure 4-28. Stretch is the default value.

The same values can be used to change the alignment of a specific cell using the justify-self property on the specific section.

To specify how content aligns vertically in a cell, we can assign the align-items property to the grid container. Its values are the same as earlier and it also defaults to stretch (Figure 4-29).

Similarly to justify-self, the same values can be used with the align-self property on an individual section to allow for a cell to behave differently than the default set on the container.

Just like flexbox, grid also has a justify-content and an align-items property. They have the same values and work in the same fashion as for flexbox. They position grid cells horizontally and vertically within the container. This can be very useful when the grid itself is smaller than the grid container.

To add space between the cells, grid-gap can be used. This will determine how much space is between each row and/or column. Individually, they can be set using grid-row-gap and grid-column-gap, respectively. For example, grid-gap: 5px 2rem would set a gap of 5 pixels between each row and a gap of 2 rems between each column.

To have the grid fill in any gaps that may exist, dense may be added to both the row and column values, grid-auto-flow: column dense.

Grid is now much more widely supported across evergreen browsers but has some compatibility issues in older browsers such as Internet Explorer 11 which currently has an incomplete implementation of the specification.

Accessibility When Using Flexbox or Grid

Grid and flexbox give the ability to reposition and reorder content at will simply by changing just one or two properties regardless of the sequence in the HTML. This can become problematic for accessibility.

The Web Content Accessibility Guidelines states

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A) Criterion 1.3.2 Meaningful Sequence (Level A)⁸

When changing the order of elements using CSS, it is important to make sure the programmatic sequence still makes sense.

CSS Reset

Normalize

Although normalizing base styles addresses differences in CSS defaults, it does not address differences in implementation or support.

Vendor Prefixes

Internet Explorer 11 (IE), for example, has a nonstandard implementation of grid. Its implementation is based on the April 7, 2011, working draft rather than the candidate recommendation.⁵ Therefore, vendor prefixes must be used in order for grid to work in IE. However, even with the use of prefixes, behavior still differs. In IE, explicitly positioning each element in the grid is necessary but not in other browsers where they will set themselves in the next available space. Furthermore, some aspects of the current specification, such as grid-gap, are simply missing. Listings 5-2 and 5-3 show the code to achieve the same layout in IE and Firefox when using grid. Both will use the same HTML (Listing 5-1). Their respective outputs are shown in Figures 5-4 and 5-6, while Figure 5-5 shows IE without vendor prefixes.

<body>

  <div class="grid-container">

    <aside>My Aside</aside>

    <section>Section 1</section>

    <section>Section 2</section>

    <section>Section 3</section>

    <section>Section 4</section>

  </div>

</body>

Listing 5-1

Grid HTML

html, body {

  padding: 36px;

  margin: 0;

}

.grid-container {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  grid-template-rows: 5rem 5rem;

  grid-gap: 1rem;

}

aside {

  grid-row: 1/3;

  background: lightgray;

}

section {

  border: solid 1px gray;

}

Listing 5-2

Grid Without Vendor Prefixes

When the same code found in Listing 5-2 is run in IE, no grid is rendered and the elements are simply stacked on top of each other (Figure 5-5).

With -ms vendor prefix and substituting grid-gap for margins, the same layout can be achieved (Figure 5-6).

Fallbacks

A better solution to vendor prefixes when a browser does not support a property is to create a fallback . When a browser encounters a property or value it does not support, it will ignore it, and therefore, the previously set value will be maintained. If the element does not have a previously set value or does not inherit a value, the default will be used.

First, a background image is set, then it is overridden by the cross-fade using the vendor prefix, and finally, it is overridden again by the standard cross-fade. Browsers that don’t support cross-fade or the vendor prefix version, such as Firefox (Figure 5-7), will display just the background image.

Browsers which do support a vendor prefix, such as Safari (Figure 5-8), will display the experimental versions.

Finally, browsers that support the final version will display the specification-defined cross-fade.

Supports At-Rule

The @supports at-rule allows for checking if a particular property and value pair is supported or not, allowing the user experience to be customized accordingly. This feature is generally well supported apart from IE. The expression @supports(property:value {} returns true when the property is supported, while @supports not (property:value){} is true for when it is not. Styles within the selector are only applied if the selector returns true. These can be conjoined with either the and or or operators to create new expressions. Generally it is prefered to use @supports for progressive enhancement of newer features, while fallbacks can be used to provide backwards-compatibility with older browsers.

When backdrop-filter is supported, the paragraph background is blurred and at a 60% opacity (Figure 5-9). When it isn’t, the paragraph background is set to white with full opacity to increase legibility that would have been gained from blur (Figure 5-10).

Transform

When creating transitions and animations, although not a requirement, the CSS transform property is often used. Transform allows elements styled with CSS to be transformed in two-dimensional space. Transform functions are based on the transformation matrix. The matrix() function is a shorthand for matrix3d() which takes six parameters a, b, c, d, tx, and ty, which are shown in bold in Figure 6-1.

Transitions

When the styles for an element are changed, transitions allow for the shift from initial state to the new state to be visually smooth. As its name implies, the transition property controls the visual aspect of how values change from one state to another over time.

In the preceding listing , the link is hovered over causing the background-color, border-color, font color, and border radius to gradually change over 250 milliseconds (see Figure 6-2).

Keyframe Animations

Unlike transitions, which can only happen once when the user triggers the event, animations can be repeated over an indefinite period of time. They can also be applied when an element is added to the DOM such as an element going from a display:none to display:block. This might be the case when opening a menu. The menu items were hidden from the user, and they need to be slid into view rather than abruptly displayed. By animating the display of the menu element, the user implicitly understands the origin of the menu item. Animation also provides more control over the steps of the animation, allowing for much more complexity than in a transition. By percentage along the animation, the keyframe rules set when what changes need to occur. Listings 6-4 and 6-5 show an example using keyframes.

<body>

  <div class="animations">Animations</div>

</body>

Listing 6-4

Keyframes HTML

html {

  padding: 0;

  margin: 0;

}

body {

  box-sizing: border-box;

  padding: 36px;

  margin: 0;

}

body > div {

  box-sizing: border-box;

  margin-bottom: 3rem;

}

@keyframes myAnimation {

  0% {

    background: gray;

    border-color: white;

    color: white;

    border-radius: 0px;

    transform: scale(0);

  }

  25% {

    transform: rotate(5deg) scale(.25);

  }

  50% {

    transform: rotate(-10deg) scale(.5);

  }

  75% {

    transform: rotate(35deg) scale(.75);

  }

  100% {

    background: white;

    border-color: gray;

    color: gray;

    border-radius: 45px;

    transform: rotate(0) scale(1);

  }

}

.animations {

  animation: myAnimation 500ms ease-in-out 1;

  background: white;

  border: solid 1px gray;

  border-radius: 45px;

  box-sizing: border-box;

  color: gray;

  font-size: 2rem;

  padding: 2rem;

  text-align: center;

  width: 100%;

}

Listing 6-5

Keyframes CSS

Background-color , border-color, color, border radius, and scale are only defined at 0 and 100% and are therefore interpolated. The element will rotate to the specified degree at each percent. Even though 100% does not specify a rotation degree, at the end of the animation, the element will set its rotation to what ever is set on the element, or 0.

Another property that can be used with animation is animation-play-state which allows the developer to pause and start an animation. When resumed, the animation will restart where it was paused rather than the beginning of the sequence. The default value for animation-play-state is running. It needs to be defined individually as its own property, however, and is not part of the animation shorthand described in Listing 6-4. Giving the user the ability to pause an animation, especially if the animation is not necessary to understanding the content or the state of the application, can radically improve the usability of the application. When considering an auto-advancing carousel, for example, adding the ability to pause the auto-incrementation of panels will allow the user to control the speed at which they view the content.

When the element is “closed” or hidden, first a class with the exit animation is added. Once the animation ends, the animationend event listener is triggered and only then can the display property value be changed to none. The same can be achieved with transitions using the transitionend event listener. Adding and removing classes, rather than handling the close animation in JavaScript, helps keep display-related logic in the CSS style sheet, increasing maintainability and keeping separation of concerns.

Timing Functions

Whether creating a transition or an animation, a common value to define is the timing function. It determines the speed at which values change over the time it takes for the animation to complete. Timing can help make the animation feel more natural and reflect physical world interactions more closely. When animating a bouncing ball, one would expect the ball to accelerate after hitting the ground. If the animation was linear, and the ball always moved at the same speed, the animation would seem off. There are two specific types of timing functions available.

Easing Functions

Easing functions define smooth transitions based on the Bézier curve, named after the French engineer Pierre Bézier. The curve is parametric,⁸ and the cubic variant is defined by four points: P₀, P₁, P₂, and P₃. P₀ and P₃ define the beginning and end of the curve, respectively. P₁ and P₂ represent the control points which give the curve its shape. Each point is defined by (x, y) coordinates.

The CSS cubic-bezier predefines P₀ and P₃ at fixed points of (0, 0) and (1, 1) representing the initial and final states of the animation. Left to be defined are P₁ and P₂ whose x values need to remain in a [0, 1] range, while the y values may exist outside of the bounding box.

The CSS function looks as follows: cubic-bezier(x1, y1, x2, y2).

Although the timing can be customized , for convenience CSS includes named common timing functions which include linear, ease, ease-in, ease-in-out, and ease-out (see Table 6-4).

Table 6-4

Named Easing Functions⁹

Name	Formula	Curve
linear	cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease	cubic-bezier(0.25, 0.1, 0.25, 1.0)
ease-in	cubic-bezier(0.42, 0.0, 1.0, 1.0)
ease-in-out	cubic-bezier(0.42, 0.0, 0.58, 1.0)
ease-out	cubic-bezier(0.42, 0.0, 0.58, 1.0)

To create bouncing effects, either or both y values should be set outside the [0, 1] range . For this, a custom function needs to be written such as in the following function: cubic-bezier(0, 0.71, 0.64, 1.23).

The curve is plotted in Figure 6-4.

Stepping Functions

Although not currently well supported across browsers, instead of a curve, a stepping function which divides the animation into equal segments across time can also be used. Two values are used to define the animation’s timing: number of steps (n) and step position (see Table 6-5). The syntax is as follows:

 animation-timing-function: steps(n, step-position);

Table 6-5

Named Stepping Functions¹⁰

Name	Function	Steps
step-start	steps(1, start)
step-end	steps(1, end)
jump-start	steps(3, jump-start)
jump-end	steps(3, jump-end)
jump-none	step(3, jump-none)
jump-both	step(3, jump-both)

When applied, the code and output would be as in Listings 6-9 and 6-10 and Figure 6-5.

<body>

  <div class="jump-start">jump-start</div>

</body>

Listing 6-9

jump-start Sample Code CSS

body {

  box-sizing: border-box;

  padding: 36px;

  margin: 0;

}

body > div {

  box-sizing: border-box;

  margin-bottom: 3rem;

}

@keyframes jumpStart {

 0% {

    width: 0;

    background-color: white;

    border: 1px solid gray;

 }

 100% {

    width: 90vw;

    background-color: gray;

    border: 1px solid gray;

 }

}

.jump-start {

  animation-name: jumpStart;

  animation-duration: 5s;

  animation-iteration-count: infinite;

  margin-bottom: 4px;

  animation-timing-function: steps(5, jump-start);

}

Listing 6-10

jump-start Sample Code CSS

Notice how the animation is already partially started. Because jump-start is used, the initial state of width 0 and color white is skipped and the animation starts with the container at a width of 20% of final state width. If jump-end had been used, the container would have started at a width of 0, but never reached a width of 100%. The container would only have a width of 80% when the animation ended.

Accessibility and Timing

When considering timing, it is important to make sure that the content does not flash more than three times in a one-second period. This is to prevent the induction of seizures due to photosensitivity in users.¹¹

Nesting

As much as it makes it very easy to know that the styles set on the list item will only be applied to the navigation list items, nesting makes it really easy to create overly specific rules. In the preceding example, nesting the list item inside of the unordered list is superfluous and does not add any value. Having it nested under the navigation only, one level higher than its current location, would be sufficient.

The ampersand refers back to the parent element, so the hover is placed on the anchor tag when it is a link, or a visited link. Nesting here makes it very clear that the hover, focus, and active selectors are all children of a:link and a:visited.

Without nesting, it is more difficult to tell at a glance that links and visited links also have styles for hover, focus, and active states. Furthermore, the nested code is more concise and does not repeat the root elements, decreasing the chance of typos or errors.

Care when nesting must be taken in order not to create rules that are overly specific. This happens when elements are nested too deep. However, it can help with code legibility.

Simple Mixin

Parameters

Arguments

The advantage of using mixins, especially with arguments, is that it allows for DRY code. The code is written once and managed in one place but applied to multiple classes. The preceding code (Listing 7-8) would compile to what is shown in Listing 7-9 and display Figure 7-1.

body {

  padding: 2rem;

}

h1 {

  margin: 0;

}

header {

  background: white;

  box-sizing: border-box;

  margin-bottom: 1rem;

  padding: 1rem;

  border: solid 1px silver;

}

div {

  background: white;

  box-sizing: border-box;

  margin-bottom: 1rem;

  padding: 1rem;

  box-shadow: 2px 2px 4px silver;

}

Listing 7-9

CSS Output

Mixins are very powerful in preventing the need to duplicate code or nonsemantic class names. Without mixins, the earlier code would require a potentially infinite number of classes, or have to rewrite the border and shadow multiple times and then maintain it in multiple locations. Another great application is when a specific parameter might apply to many aspects of an element, but differs depending on context, while the rest of the element needs to stay consistent regardless of the situation. Informational boxes to the user might be an example, where there is a need for information, successes, warnings, and errors. The boxes need to look the same except for color (Listings 7-10 and 7-11 and Figure 7-2).

<body>

  <p class="message info">Information</p>

  <p class="message success">Success</p>

  <p class="message warning">Warning</p>

  <p class="message error">Error</p>

</body>

Listing 7-10

Informational Boxes HTML

@mixin message($color) {

  background: lighten($color, 40%);

  border: solid 1px $color;

}

body {

  padding: 2rem;

}

.message {

  padding: 1rem;

}

.info {

  @include message(blue);

}

.success {

  @include message(green);

}

.warning {

  @include message(orange);

}

.error {

  @include message(red);

}

Listing 7-11

Informational Boxes SCSS

Even though the padding could have been included in the mixin, it is separated out into its own class because when a mixin is added, it does its computation and outputs all the code each time; therefore, mixins are not a good use case for static information. Static styles are simply programmatically being copied over into each class increasing the size of the CSS and therefore upload time. Classes, defaults on elements, or the use of the @extend at-rule are much better options for static styles.

Manipulating CSS Using JS

Both a huge advantage and risk, JavaScript has the ability to easily override anything declared by CSS but does not have to.

If we don’t want to mix CSS rules in our JavaScripts, the methods given to us via classList allow for adding and removing classes to the element without ever touching the CSS itself. This brings with it the huge benefit of styling definition staying in CSS files and not being split between JS and CSS files.

Affecting styles or the DOM itself brings the advantage that the specificity of CSS being applied matters very little since it will be overridden. Via this technique, regardless of any other context, as a developer, we can dictate that if a user performs a certain action, or a particular state is achieved, a particular set of styles will be applied regardless of other styling, or context. This technique is often used to show and hide dialog boxes, for example, notification messages. The advantage of this technique is that the style changes can stay with its trigger, or action, and regardless of context, the styles being applied will not be overridden by preexisting CSS.

There are situations where JavaScript allows us to do things that are simply not possible with pure HTML and CSS solution. A perfect example would be using event listeners for the animation’s timing, start, or end (see Listings 8-1 to 8-3 and Figure 8-3).

<body>

  <div class="image">

    <img src="art.png" alt="modern art" id="image">

    <button onClick="rotateImage()" id="button">Rotate Image</button>

  </div>

</body>

Listing 8-1

Animation Listener HTML

html, body {

  padding: 36px;

  margin: 0;

}

@keyframes rotate {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

.rotate { animation: rotate ease-in-out 500ms 1; }

.image { text-align: center; }

img { max-width: 100%; }

button {

  display: block;

  margin: 1rem auto;

  padding: 1rem;

  width: 25%;

}

Listing 8-2

Animation Listener CSS

var image, button;

(function() {

  'use strict';

  image = document.getElementById('image');

  image.addEventListener('animationend', reEnableButton);

  button = document.getElementById('button');

})();

function reEnableButton() {

  button.disabled = false;

  image.classList.remove('rotate');

}

function rotateImage() {

  image.classList.add('rotate');

  button.disabled = true;

}

Listing 8-3

Animation Listener JavaScript

The button triggers the JavaScript to disable the button and add a class of rotate which makes the image spin once. Because on page load, we set up the JavaScript to listen for animation’s ending, once the animation is terminated, we can reset the page. The button is reenabled, and the rotate class is removed. In this example, even though we are manipulating the CSS with JavaScript, the CSS classes are still defined and maintained in the CSS file, and therefore, inheritance and cascading are not altered or affected.

Web Components

In the Document Object Model (DOM) , custom elements can be created and encapsulated by being attached to the DOM using Shadow DOM. Shadow DOM is a subtree of DOM elements that can be attached to the rendering document composed of a shadow host, shadow root, and shadow tree (see Figure 8-5).

Components created using this technique are fully encapsulated, and the author has complete control as to what the consumer will be able to style vs. not because everything within the Shadow DOM is akin to a black box from the perspective of the parent page or component. For a short while, we were able to ignore the encapsulation by using shadow piercing combinators such as >>> or ::deep, but these have been deprecated or removed from most browsers in favor of the upcoming CSS Shadow Parts ⁶ specification currently being refined. Even after this new specification is implemented, however, the author of the component will still control what users will be able to fiddle with; specificity, !important, and shadow piercing combinations will continue to fail to edit styles that the component author did not open to being altered.