recursal/MDN huggingface dataset:
Implementing image sprites in CSS
=================================

**Image sprites** are used in numerous web apps where multiple images are used. Rather than include each image as a separate image file, it is much more memory- and bandwidth-friendly to send them as a single image; using background position as a way to distinguish between individual images in the same image file, so the number of HTTP requests is reduced.

**Note:** When using HTTP/2, it may in fact be more bandwidth-friendly to use multiple small requests.

Implementation
--------------

Suppose an image is given to every item with class `toolbtn`:


```css
.toolbtn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}
```


A background position can be added either as two x, y values after the `url()` in the background, or as `background-position`. For example:


```css
#btn1 {
  background-position: -20px 0px;
}

#btn2 {
  background-position: -40px 0px;
}
```


This would slide the starting point of the background image for the element with the ID `btn1` 20 pixels to the left and the element with the ID `btn2` 40 pixels to the left (assuming they have the class `toolbtn` assigned and are affected by the image rule above).

Similarly, you can also make hover states with:


```css
#btn:hover {
  background-position: <pixels shifted right>px <pixels shifted down>px;
}
```

See also
--------

* Full working demo at CSS Tricks
Sticky footers
==============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height. We'll look at a couple of techniques for creating one in this recipe.

![A sticky footer pushed to the bottom of a box](/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers/cookbook-footer.png)

Requirements
------------

The Sticky footer pattern needs to meet the following requirements:

* Footer sticks to the bottom of the viewport when content is short.
* If the content of the page extends past the viewport bottom, the footer then sits below the content as normal.
The recipe
----------

Download this example

**Note:** In this example and the following one we are using a wrapper set to `min-height: 100%`. You can also achieve this for a full page by setting a `min-height` of `100vh` on the `<body>` and then using it as your grid container.

Choices made
------------

In the above example we achieve the sticky footer using CSS Grid Layout. The `.wrapper` has a minimum height of `100%` which means it is as tall as the container it is in. We then create a single column grid layout with three rows, one row for each part of our layout.

Grid auto-placement will place our items in source order and so the header goes into the first auto sized track, the main content into the `1fr` track and the footer into the final auto sized track. The `1fr` track will take up all available space and so grows to fill the gap.

Alternate method
----------------

You can also use Flexbox to create a sticky footer.

The flexbox example starts out in the same way, but we use `display:flex` rather than `display:grid` on the `.wrapper`; we also set `flex-direction` to `column`. Then we set our main content to `flex-grow: 1` and the other two elements to `flex-shrink: 0` — this prevents them from shrinking smaller when content fills the main area.

Resources on MDN
----------------

* CSS properties: `display`, `min-height`, `grid-template-rows`, `flex-direction`, `flex-grow`, `flex-shrink`
* Basic concepts of grid layout
* CSS grid layout module
* Basic concepts of flexbox
* CSS flexible box layout module
Grid wrapper
============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
The grid wrapper pattern is useful for aligning grid content within a central wrapper while also allowing items to break out and align to the edge of the containing element or page.

Requirements
------------

Items placed on the grid should be able to align to a horizontally-centered max-width wrapper or the outer edges of the grid, or both.

Recipe
------

Download this example

Choices made
------------

This recipe uses the CSS grid `minmax()` function to define the grid track sizes in the `grid-template-columns` property. For the central columns with a maximum width, we can set a minimum value of `0` or greater and a maximum value that specifies the maximum size the column tracks will grow to. Using relative or absolute `<length>` units (pixels, ems, rems) will create a fixed maximum size for the central wrapper, whereas using `<percentage>` values or viewport units will cause the wrapper to grow or shrink in response to its context.

The outer two columns have a maximum size of `1fr`, meaning that they will each expand to fill the remaining available space in the grid container.

Useful fallbacks or alternative methods
---------------------------------------

To center the grid horizontally on the page you can set a `max-width` along with left and right `auto` `margin`s:


```css
.grid {
  max-width: 96vw; /\* Limits the width to 96% of the width of the viewport \*/
  margin: 0 auto; /\* horizontally centers the container \*/
}
```

Accessibility concerns
----------------------

Although CSS grid enables positioning items anywhere (within reason), ensuring that your underlying markup follows a logical order is important (see CSS Grid layout and accessibility for more details).

See also
--------

* `grid-template-columns` property
* CSS grid layout module
* CSS Grid: More flexibility with minmax() (2018)
* Breaking out with CSS grid (2017)
Breadcrumb navigation
=====================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
Breadcrumb navigation helps the user to understand their location in the website by providing a breadcrumb trail back to the start page. The items typically display inline, with a separator between each item, indicating the hierarchy between individual pages.

![Links displayed inline with separators](/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation/breadcrumb-navigation.png)

Requirements
------------

Display the hierarchy of the site by displaying inline links, with a separator between the items, indicating the hierarchy between individual pages, with the current page appearing last.

Recipe
------

Download this example

**Note:** The example above uses a complex selector to insert content before every `li` except the last one. This could also be achieved using a complex selector targeting all `li` elements except the first:


```css
.breadcrumb li:not(:first-child)::before {
  content: "→";
}
```


Feel free to choose the solution that you prefer.

Choices made
------------

To display list items inline, we use flexbox layout, thus demonstrating how a line of CSS can give us our navigation. The separators are added using CSS generated content. You could change these to any separator that you like.

Accessibility concerns
----------------------

We used the `aria-label` and `aria-current` attributes to help assistive technology users understand what this navigation is and where the current page is in the structure. See the related links for more information.

Be aware that the arrows `→` added via `content` are exposed to screen readers and braille displays.

See also
--------

* CSS Flexible Box Layout
* Providing a Breadcrumb Trail
* Using the `aria-current` attribute
Center an element
=================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
In this recipe, you will see how to center one box inside another by using flexbox and grid. Centering both horizontally and vertically is simple and straightforward.

![an element centered inside a larger box](/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element/cookbook-center.png)

Requirements
------------

To place an item into the center of another box horizontally and vertically.

Recipe
------

Download this example

Using flexbox
-------------

To center a box within another box, first turn the containing box into a flex container by setting its `display` property to `flex`. Then set `align-items` to `center` for vertical centering (on the block axis) and `justify-content` to `center` for horizontal centering (on the inline axis). And that's all it takes to center one box inside another!

### HTML


```html
<div class="container">
  <div class="item">I am centered!</div>
</div>
```

### CSS


```css
div {
  border: solid 3px;
  padding: 1em;
  max-width: 75%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8em;
}
```


We set a height for the container to demonstrate that the inner item is indeed vertically centered within the container.

### Result

Instead of applying `align-items: center;` on the container, you can also vertically center the inner item by setting `align-self` to `center` on the inner item itself.

Using grid
----------

Another method you can use for centering one box inside another is to first make the containing box a grid container and then set its `place-items` property to `center` to center align its items on both the block and inline axes.

### HTML


```html
<div class="container">
  <div class="item">I am centered!</div>
</div>
```

### CSS


```css
div {
  border: solid 3px;
  padding: 1em;
  max-width: 75%;
}
.container {
  display: grid;
  place-items: center;
  height: 8em;
}
```

### Result

Instead of applying `place-items: center;` on the container, you can achieve the same centering by setting `place-content: center;` on the container or by applying either `place-self: center` or `margin: auto;` on the inner item itself.

Resources on MDN
----------------

* Box Alignment in Flexbox
* CSS Box alignment guide
List group with badges
======================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
In this recipe we will create a list group pattern with badges that indicate a count.

![A list of items with a badge indicating a count displayed to the right of the text.](/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges/list-group-badges.png)

Requirements
------------

The list items should be displayed with the badges. The badge should be aligned right and vertically centered. The badge must be centered vertically whether there is a single line of content or multiple lines of text.

Recipe
------

Download this example

Choices made
------------

Flexbox makes this particular pattern straightforward and also facilitates making changes to the layout.

To ensure the text and badge line up correctly, I use the `justify-content` property with a value of `space-between`. This places any extra space between the items. In the live example, if you remove this property, you will see the badge move to the end of the text on items with text shorter than the one line.

To align the content horizontally, I use the `align-items` property to align the text and badge on the cross axis. If you want the badge to align to the top of the content instead, change this to `align-items: flex-start`.

See also
--------

* Box alignment in Flexbox
* Aligning items in a flex container
* CSS flexible box layout module
Pagination
==========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
This cookbook pattern demonstrates the navigation pattern used to display pagination, where the user can move between pages of content such as search results.

![Links to sets of pages in a paged listing](/en-US/docs/Web/CSS/Layout_cookbook/Pagination/pagination.png)

Requirements
------------

The pagination pattern typically displays items in a row. To ensure that the pagination is understandable by people using a screen reader, we mark the items up as a list inside a `<nav>` element, and then use CSS to display the layout visually as a row.

Typically, the pagination component will be centered horizontally underneath the content.

Recipe
------

Download this example

Choices made
------------

This pattern is laid out using flexbox — one flex container nested inside another. The `<nav>` element is designated a flex container in order that we can center the list inside using the `justify-content` property.

The list itself also becomes a flex container to lay the items out as a row. To space the items out we can either use a `margin` on the flex items or add a `gap` on the flex container.


```css
.pagination {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
}
```

Accessibility concerns
----------------------

We want to ensure that a person using a screen reader understands what this navigation does, and where they will go when clicking a link. To help with this we have added `aria-label="pagination"` on the `<nav>` element.

We have also added some additional content that would be read by a screen reader but is hidden visually, and set the `aria-hidden` attribute on the paging arrows.

The "See Also" section at the end of this document has links to related accessibility topics.

Specifications
--------------

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-property |

See also
--------

* `justify-content`, `gap`
* Know your ARIA: 'hidden' vs 'none' (2018)
* Invisible content just for screen reader users via WebAIM.org (2020)
* Writing CSS with accessibility in mind (2017)
* a11y style guide: pagination
Recipe: Media objects
=====================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
The *Media Object* is a pattern we see all over the web. It refers to a two-column box with an image on one side and descriptive text on the other, e.g. a social media post.

![Example of a media object with profile image on the left side and lorem ipsum text to the right filling up 80% of the space](/en-US/docs/Web/CSS/Layout_cookbook/Media_objects/media-object.png)

Requirements
------------

Media Object pattern needs some or all of the following characteristics:

* Stacked on Mobile, two columns on Desktop.
* The image can be on the left or right.
* The image might be small or large.
* Media Objects can be nested.
* The Media Object should clear the contents no matter which side is tallest.
The recipe
----------

Download this example

Choices made
------------

I have chosen to use grid layout for the media object as it allows me to control the layout in two dimensions when I need to. This means that when we have a footer, with short content above, the footer can be pushed down to the bottom of the media object.

Another reason to use grid layout is in order that I can use `fit-content` for the track sizing of the image. By using `fit-content` with a maximum size of 200 pixels, when we have a small image such as the icon, the track only gets as large as the size of that image — the `max-content` size. If the image is larger, the track stops growing at 200 pixels and as the image has a `max-width` of 100% applied, it scales down so that it continues to fit inside the column.

By using `grid-template-areas` to achieve the layout, I can see the pattern in the CSS. I define my grid once we have a max-width of 500 pixels, so on smaller devices the media object stacks.

An option for the pattern is to flip it to switch the image to the other side — this is done by adding the `media-flip` class, which defines a flipped grid template causing the layout to be mirrored.

When we nest one media object inside another we need to place it into the second track in the regular layout, and the first track when flipped.

See also
--------

* `fit-content` property
* Using grid template areas
* CSS grid layout module
Split navigation
================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
The **split navigation** is a navigation pattern where one or more elements are separated from the rest of the navigation items.

![Items separated into two groups.](/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation/split-navigation.png)

Requirements
------------

A common navigation pattern is to have one element pushed away from the others. We can use flexbox to achieve this, without needing to make the two sets of items into two separate flex containers.

Recipe
------

Download this example

Choices made
------------

This pattern combines auto margins with flexbox to split the items.

An auto margin absorbs all available space in the direction it is applied. This is how centering a block with auto margins works — you have a margin on each side of the block trying to take up all of the space, thus pushing the block into the middle.

In this case the left auto margin takes up any available space and pushes the item over to the right. You could apply the class `push` to any item in the list.

See also
--------

* CSS flexible box layout module
* `display` property
* `margin` property
Cookbook template
=================

**Note:** This is a template page for a CSS Cookbook page. Please use this as a raw template when you create a new cookbook page.
 *Comment in italics are information about how to use part of the template.*

*Description of the problem this recipe solves or the pattern you are demonstrating.*

Requirements
------------

*What does this pattern need to include, or what problems does it need to solve? List that here.*

Recipe
------

*Change the path to the example below to point to your merged example. The last parameter is the live example height, which you can change as needed.*

*Change the link to point to your merged download version.*

Download the example

Choices made
------------

*Explain your decisions when creating the pattern. Why did you choose a certain method? If you want to add an additional example here — for example a version with fallbacks, please do. This section is deliberately loose as patterns range from the very simple to more complex.*

Useful fallbacks or alternative methods
---------------------------------------

*If there are useful alternative methods for building the recipe, or fallback recipes to use if you have to support non-supporting browsers, include them in separate sections down here.*

Accessibility concerns
----------------------

*Include this is there are any specific things to watch out for in regard to accessibility. If not relevant for your pattern this can be omitted.*

Browser compatibility
---------------------

*List the key properties you used in the `browser-compat` frontmatter metadata key. Then use the `{{Compat}}` macro in this section to automatically generate a compatibility table for the listed properties.*

See also
--------

* *Links of link of related properties: `example-property`*
* *Links to article showing how to use the property in context: "Using … article"*
* *Very good external links. Don't be afraid of external links, but they should be outstanding, and not only mention minor details.*
hover
=====

The **`hover`** CSS media feature can be used to test whether the user's *primary* input mechanism can hover over elements.

Syntax
------

The `hover` feature is specified as a keyword value chosen from the list below.

`none`

The primary input mechanism cannot hover at all or cannot conveniently hover (e.g., many mobile devices emulate hovering when the user performs an inconvenient long tap), or there is no primary pointing input mechanism.

`hover`

The primary input mechanism can conveniently hover over elements.

Examples
--------

### HTML


```html
<a href="#">Try hovering over me!</a>
```

### CSS


```css
/\* default hover effect \*/
a:hover {
  color: black;
  background: yellow;
}

@media (hover: hover) {
  /\* when hover is supported \*/
  a:hover {
    color: white;
    background: black;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # hover |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media
color
=====

The **`color`** CSS media feature can be used to test the number of bits per color component (red, green, blue) of the output device.

Syntax
------

The `color` feature is specified as an `<integer>` value that represents the number of bits per color component (red, green, blue) of the output device. If the device is not a color device, the value is zero. It is a range feature, meaning that you can also use the prefixed **`min-color`** and **`max-color`** variants to query minimum and maximum values, respectively.

**Note:** If the various color components are represented by different numbers of bits, the smallest number is used. For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component. If the device uses indexed colors, the minimum number of bits per color component in the color table is used.

See Applying color to HTML elements using CSS to learn more about using CSS to apply color to HTML.

Examples
--------

### HTML


```html
<p>
  This text should be black on non-color devices, red on devices with a low
  number of colors, and greenish on devices with a high number of colors.
</p>
```

### CSS


```css
p {
  color: black;
}

/\* Any color device \*/
@media (color) {
  p {
    color: red;
  }
}

/\* Any color device with at least 8 bits per color component \*/
@media (min-color: 8) {
  p {
    color: #24ba13;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # color |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Applying color to HTML elements using CSS
* The CSS `color` property
* The CSS `<color>` data unit