CSS basics - martindubenet/wed-dev-design GitHub Wiki

Custom properties (sometimes referred to as «CSS variables» or «cascading variables») are entities defined by CSS authors that contain specific values to be reused throughout a document.

Since Dart Sass compiler is the standard, interpolation is required for parsing Sass variables as CSS custom properties.
More about CSS Colors here.

/* First declaring the vars */
$scssVar: #fefefe;       /* if sass var declared it previous to the `:root` */
:root {
  --value: #FEFEFE;      /* css var */
  --value: #{$sassVar};  /* sass to css var */
}

/* Then applying it */
.selector {
  color: var(--value);
  background: var(--value) url(image.png) center center;
}

To use an existing custom variable as a negative value, multiply it by -1

:root {
  --positive-value: 20px;
}
.container {
  margin-inline: calc(-1 * (var(--positive-value)));
}

// Breakpoint values based on Bootstrap Grid
@media screen and (min-width: 320px) { … } // mobile phone first but including ALL other screen devices
@media screen and (max-width: 575px) { … } // mobile phone only (excluding giant phones in landscape orientation)
@media screen and (min-width: 576px) { … } // mobile tablets and others
// 
@media speech { … }
@media screen { 
    .media-screen { display: block; }
    .media-print { display: none; }
}
@media print { 
    .media-screen { display: none; }
    .media-print { display: block; }
}

The optional keywords used in media queries have an important meaning:

• @media … and … : The and keyword combines a media feature with a media type or other media features.
• @media not … : The not keyword inverts the meaning of an entire media query.
• @media only … : It has no effect on modern browsers.

References:

1. « Media queries for standard devices » on CSS-tricks,
2. More from MDN about @media,
3. « Media Queries Demystified: CSS Min-Width and Max-Width » on EmailOnAcid.com.
4. Media Speech :
   • Web Speech API Specification - w3c
   • The SpeechRecognition Interface - w3c
   • The SpeechSynthesis Interface - w3c
   • Voice Driven Web Apps: Introduction to the Web Speech API - Google Developers
   • Web apps that talk - Introduction to the Speech Synthesis API - Google Developers
   • Best Practices - cloud.google.com
   • «Let’s Talk About Speech CSS» - css-tricks.com
   • «Best Translation Tools For Your Website» - Henley Griffin

The background-clip is⌝ a property that allow us to dictate where starts the background-image on the « X and Y axis » of the container's content.

This will set it on the external edge, under any dotted or dashed styled border.

background-clip: border-box;

This tricky one will display the background-image as a texture (see through) on text content.

background-image: url(background-texture-image-example.jpg);
-webkit-background-clip: text;
background-clip: text;
color: transparent;

The background attachment⌝, if fixed, is

This sets the relative to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the element.

background-image: url(image.jpg);
background-attachment: fixed;

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

Clippy⌝ is an online clip-path CSS generator webapp by Bennett Feely⌝.

The currentcolor CSS keyword represents the value of an element's color property. This lets you use the (text) color value (from a parent to a child) on properties that do not receive it by default. (mdn)

.parent { color: red; }
.parent .child { background-color: currentcolor; }

font-size and font-family are the minimum requirement for the shorthand to work, otherwise it'll just be a syntax error and do nothing.

* {
    font:  font-style  font-variant  font-weight  font-size/line-height  font-family;
}

Because I keep forgetting them.

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-transform: none;

CSS-Tricks Complete Guide to Flexbox is a must read.

• Flex cheatsheet from yoksel.github.

Scroll down to Utility classes ⭳ for reference.

A grid is⌝ a set of intersecting horizontal and vertical lines defining columns and rows. Elements can be placed onto the grid within these column and row lines. It introduced the fr (fraction)⌝ as an abstract measurement unit for quantity of columns and/or rows in a grid.

CSS-Tricks Complete Guide to Grid is an other must read for this subject. Also they have an introduction to fr (fractions) unit that is pretty useful for creating grids via grid property.

Scroll down to Data list grid ⭳ model for reference.

<a> stands for HTML Anchor tag.

Never use href="javascript:void(0)" just to get the UX benefit of a hand pointer 👆 on an anchor. Instead just don't set href at all and rely on CSS to fix the UX.

a:not([class]),
a:not([href]) {
  text-decoration: none;
}
a:not([href]) {
  cursor: pointer;
}

Refered to as « Dark mode theme », this media feature used to detect if a user has requested Light or Dark color themes. A user indicates their preference through an operating system setting or a user agent setting.

.container { background-color: black; }

@media (prefers-color-scheme: dark) {
  .container { background-color: white; }
}

See « Window: matchMedia() method » on MDN for using JavaScript to detect the active prefers-color-scheme on user's station.

This cheatsheet is based on « Specifics on CSS Specificity » from CSS-Tricks.com. You can see a detailed article about Specificity and real usage examples

Utility classes (sometimes referred to as «helper classes») help you work within the constraints of a system instead of littering your stylesheets with arbitrary values. They make it easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design system. …Read more

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

• tailwindcss.com

This attribute allow us to set a keyboard shortcut combination associated with the browser that we use. See each browser’s shortcut on Wikipedia for a reference. Bootstrap use it as a feature of their v.5 documentation. See how they integrated it.

*[accesskey] {
    position: relative;
}
*[accesskey]:after {
    content: 'Ctrl + /';  /* replace the latest by your accesskey value */
    position: absolute;
    top: .4rem;
    right: .4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    padding-right: .25rem;
    padding-left: .25rem;
    font-size: .75rem;
    border: 1px solid gray;
    border-radius: .125rem;
}

This is duplicated from «A Striped Barberpole Animation» post on CSS-tricks.com

.barberpole-style {
  background-image: repeating-linear-gradient(
    45deg,
    Blue 0,
    Blue 10px,
    hsla(0,0%,12%, 0.5) 10px,
    hsla(0,0%,12%, 0.5) 20px,
    Red 20px,
    Red 30px,
  );
  background-size: 200% 200%;
  animation: rotatingBarberPole 10s linear infinite;
}
@keyframes rotatingBarberPole {
  100% {
    background-position: 100% 100%;
  }
}

In HTML we rely on either the white space character ( ) or <br> and/or <pre>…</pre> tags to control rendering of text requiring controled line breaks. But since responsive design is a thing it is safer to rely on CSS to manage those special rendering requests within @media{} queries.

To generate a <br> effect within a content string you need :

1. Set white-space: pre;.
2. Use the escaping character \A as a break line character.

.selector:after {
    content: 'First row \A second row';
    white-space: pre;
}

white-space: nowrap;   /* brutal one liner */
white-space: pre;      /* keeps tabing and/or white space. Same as HTML <pre> tag. */
white-space: normal;   /* revert */

In depricated HTML formats we use to rely on the HTML tag <nobr>…</nobr> to force the rendering of text as a one liner like (at the risk of breaking the layout) nowrap does in CSS. So it makes sense to use this nomenclature as a utility class in your stylesheets : .nobr{ white-space: nowrap; }.

The pointer-events property set whether or not an element should react to a clicking events. It is a pure CSS solution to disables links on CTA and more without requiring JavaScript.

.disabled,
*[disabled] {
    pointer-events: none;
    cursor: auto;
}

Display an HTML Description List (<dl>) as a simple two columns data-grid with Description Term (<dt>) on the Left and Description Details (<dd>) on the Right.

.data-list-grid {
    display: grid;
    grid-row-gap: 1rem;
    grid-column-gap: 1rem;
    grid-template-columns: [term] 50% [description] 50%;
    /* Responsive for above phone size (optional) */
    @media (min-width: 480px) {
        grid-template-columns: [term] 30rem [description] auto;
    }
}
/* Reset base margins on DT and DD */
dl.data-list-grid {
  dt+dd,
  dd+dt { 
    margin-top:0;
  }
  dd {
    margin-bottom:0;
    margin-left:0;
  }
}

<dl class="data-list-grid">
    <dt>Label 1</dt>
    <dd>Value 1</dd>
    <dt>Label 2</dt>
    <dd>Value 2</dd>
</dl>

dl.data-inline-list {
  width: 100%;
}
.data-inline-list > dt,
.data-inline-list > dd {
    display: inline-block;
    width: calc(50% - 0.25rem);
    margin: 0;
    padding: 0;
}
.data-inline-list > dd {
    margin-left: 0.5rem;
    text-align: right;
}

<dl class="data-inline-list">
    <dt>Label 1</dt>
    <dd>Value 1</dd>
</dl>
<dl class="data-inline-list">
    <dt>Label 2</dt>
    <dd>Value 2</dd>
</dl>

This is a pure CSS recipe to get a parallax effect, where you scroll down your page to access the content over a fixed image.

.full-page-background {
  position: fixed;
  z-index: -1 /* optional */
  top: 0; right: 0; bottom: 0; left: 0;
  background: url(image.jpg) no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

The language pseudo selector :lang is very useful for styling multi-lingual websites. It takkle the two first characters set in the parent HTML attribute (or meta) lang anywhere in the DOM structure. If any it reads all up to the (HTML5 required) <html lang="fr-CA"> declaration. The best of all, we don't need to replicate the DOM structure within our CSS alowing for a much cleaner stylesheet code.

French and Spanish commonly use a different set opening/closing character for quotation marks: « … » instead of “…”.

q {
  &:before {
    content: '\201c';
  }
  &:after {
    content: '\201d';
  }
  &:lang(es),
  &:lang(fr) {
    &:before {
      content: '\00ab\0020';
    }
    &:after {
      content: '\0020\00bb';
    }
  }
}

Bootstrap with their Ratio helper propose the best solution to apply an image-ratio (without JavaScript) on a container that change height according to viewport width (responsive)

<div class="ratio ratio-16x9"><img /></div>

:root {
  .ratio-16x9: --bs-aspect-ratio: calc(9 / 16 * 100%);
}
.ratio::before {
    display: block;
    padding-top: var(--bs-aspect-ratio);
    content: "";
}

• https://css-tricks.com/snippets/css/css-box-shadow/

.selector {
    box-shadow:   x  y  blurRadius  spreadRadius  hexColor;
    text-shadow:  x  y  blurRadius  hexColor;
}

• https://css-tricks.com/the-shapes-of-css/

// var
$cssTriangleDimension: 100px;

// style
.css-triangle {
  width: 0;
  height: 0;
  border: 0 solid transparent;

  // Up
  &.pointing-up {
    border-left-width: ($cssTriangleDimension /2);
    border-right-width: ($cssTriangleDimension /2);
    border-bottom-width: $cssTriangleDimension;
    // Set background-color
    border-bottom-color: red;
  }
  // Down
  &.pointing-down {
    border-left-width: ($cssTriangleDimension /2);
    border-right-width: ($cssTriangleDimension /2);
    border-top-width: $cssTriangleDimension;
    // Set background-color
    border-top-color: green;
  }
  // Right
  &.pointing-right {
    border-top-width: ($cssTriangleDimension /2);
    border-bottom-width: ($cssTriangleDimension /2);
    border-left-width: $cssTriangleDimension;
    // Set background-color
    border-left-color: orange;
  }
  // Left
  &.pointing-left {
    border-top-width: ($cssTriangleDimension /2);
    border-bottom-width: ($cssTriangleDimension /2);
    border-right-width: $cssTriangleDimension;
    // Set background-color
    border-right-color: blue;
  }
}

Simple CSS here «a:focus, button:focus { outline: none; }» or SCSS below:

a,
button {
  &:focus {
    outline: none;
  }
}

The writing-mode CSS property is useful for vertically displaying text within tight data tables headings (<thead> or <th>). Simply aligning them vertically saves you so much space on a row!

horizontal-tb value translates to « HORIZONTALly displayed, justified from Top to Bottom ».
<html dir="rtl"> : For arabic, persian and other «Right To Left» languages WC3 requires to set the dir attribute on the HTML tag.

writing-mode: horizontal-tb; /* sam as `initial` */
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: initial;       /* default */

This is very useful on tight <thead> layout where you can't trunkate titles. Simply aligning them vertically saves you so much space on a row!

writing-mode: vertical-lr;

// default is
writing-mode: initial;

Background-color property is supported for the <svg> tag itself. NOT for the child tags within the SVGs. To assign background colors SVGs use the fill property. This is supported for about any child tags within SVGs (ex: <path class="pathClassExample" fill="…")

This works for inline SVG and JavaScript injected SVGs. But NOT for CSS { background-image: url(*.svg) }

svg.icon { background-color: transparent; }
svg.icon path { fill: Red; }
svg.icon .pathClassExample { fill: transparent; }

1. HTML colors by name : https://www.w3schools.com/colors/colors_names.asp
2. Webapp to compare HEX colors : https://www.colortools.net/color_compare_colors.html
3. Webapp to convert RGB -vs- HEX color values : https://rgbcolorcode.com/color/converter/
4. Webapp to generate variations using SASS color function : http://scg.ar-ch.org/

• «CSS Remedy - rethinking the approach to CSS resets» by Kevin Powell about the CSS Remedy project on Github,
• «A Modern CSS Reset» by Andy Bell.

/**
 * Resets
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html:focus-within {
  scroll-behavior: smooth; /* prevent jump effect when scrollbar appears */
}
body {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* prevents a short content page from not filling the page */
  text-rendering: optimizeSpeed;
  line-height: 1.5; /* latin french caracters requires a minimum of 1.32 to show accents on uppercases */
}
body,
h1, h2, h3, h4, h5, h6, p,
blockquote, figure, picture {
  margin: 0;
}
img, picture, canvas, iframe, embed, object, video, audio  {
  max-width: 100%;
  display: block;
}

/* forms */
button {
  font: inherit; /* same font as body */
} 

/* apply same cursor on anything that clicks */
a:not([href], [disabled], .disabled) {
  cursor: pointer;
}
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Anything disabled should not be clickable */
.disabled,
*[disabled] {
  pointer-events: none;
  cursor: auto;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.d-flex, d-grid {
  gap: var(--gap, 1rem);
}
.d-flex {
  display: flex;
}
.d-flex-centers {
  display: flex;
  align-items: center;
  text-align: center;
}

.d-grid {
  display: grid;
}

Contents gets hidden (invisible) but still accessible for web crawler and screen reader devices (WCAG compliant). ©Bootstrap screen readers.

.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  white-space: nowrap;
  border-width: 0;
  border: 0;
}

Truncate string of text with hellips (…) within the end.

.truncate-overflowing-text {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}