#CSS snippets

---

#Pseudo classes

In CSS, the order of pseudo-classes matters. It should be as follows:

a:visited { 
    color: pink;
}

a:focus {
    outline: 1px dotted solid;
}

a:hover {
    background: grey;
}

a:active {
    background: darkgrey;
}

Summary:

• :visited is the state when a link has been clicked. When a user revisits a web page, that link should have a different state, so that the user can tell they've visited it.
• :focus is the state that shows up when the user navigates the page by keyboard. A button or link should take a style that clearly indicates it is in focus.
• :focus-visible can be used instead of :focus if you do not want the focus style to be triggered by mouse clicks.
• :hover is the state when an element is hovered over by the mouse.
• :active is the state when an element is being pressed from a click by the mouse.

#Box sizing

html {
    box-sizing: border-box;
}
*, 
*:before, 
*:after { 
    box-sizing: inherit;
}

#Visually hidden

.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
    clip: rect(1px, 1px, 1px, 1px); 
    white-space: nowrap; /* added line */
}

#Disable animation for users who opts out

.element {
    animation: pulse 1s linear infinite both;
}
@media (prefers-reduced-motion: reduce) { 
    .element {
        animation: none;
    }
}

#Images

Remove margin under images and make the block elements by default.

img {
    display: block; 
    width: auto; 
    max-width: 100%;
}

#Margin collapse

This is one of the most common issues with margins.

You have two elements aligned vertically, the one above with margin-bottom and the one below with margin-top.

The greater of the two values will be used as the margin between the elements, and the other will be ignored by the browser.

This also means that a box with both margin top and bottom will collapse with adjacent elements when they are stacked vertically.

1em
+-----------------------+
|                       |
+-----------------------+
1em

will render like this when stacked:

1em
+-----------------------+
|                       |
+-----------------------+
1em
+-----------------------+
|                       |
+-----------------------+
1em

#Stacking order and pseudo-elements

In HTML, an element that sits at the bottom of a container will be positioned above the preceding elements.

<div class="home">
    <!-- ::before element --> 
    <div class="floor"></div> 
    <div class="desk"></div> 
    <div class="laptop"></div> 
    <!-- ::after element -->
</div>

Pseudo-elements are in-line by default, and needs a content property:

.element::before { 
    content: "";
    display: block;
    background: #ccc;
    width: 100px;
    height: 100px; /* width and height needs a block element */
}

#Transitions

You can't transition from height 0 to auto. Rather you can transition the max-height value instead since it will stop at the real height of the content. Make sure the max-height value is larger than the content height

.element { 
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out; 
}
.element:hover { 
    max-height: 300px;
}

... and visibility

.menu { 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out; 
}
.menu-wrapper:hover .menu { 
    opacity: 1;
    visibility: visible;
}

#Remove hover effect on touch screens

Sometimes we might need to hide the hover effects on touch screens so they don't trigger when the user scrolls the page. Especially for large hover effects on things like cards and similar.

@media (hover: hover) { 
    .element:hover {
        color: #222; 
    }
}

#Flexbox

Make flexbox children the same width without setting a fixed width:

.item { 
    flex-grow: 1;
    flex-basis: 0%;
}

Flex-basis set to 0% makes the width calculations disregard the content width for each item and make all items the same size.