Skip to main content
CSS

CSS #

My notes on CSS & HTML from ages ago (in Japanese): notes: html 5 & css 3

Font #

@font-face #

Doc: @font-face - CSS: Cascading Style Sheets | MDN

font-family (font stack) #

Reminder to self: Remove Segoe UI from all font stacks.

Google Fonts API #

Google Fonts was deemed not GDPR compliant in Germany (coverage by The Hacker News, Bitdefender, jsDelivr). If your website have a lot of visitors from the EU, consider self-hosting the fonts.

Async (v1) #

Refs:

Following is the code I adapted for hugo-theme-diary:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style"
      href="https://fonts.googleapis.com/css?family=Lora|Noto+Serif+SC|Material+Icons&display=swap" />
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Lora|Noto+Serif+SC|Material+Icons&display=swap"
      media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Lora|Noto+Serif+SC|Material+Icons&display=swap" />
</noscript>

Async (v2) #

Not tested:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style"
      href="https://fonts.googleapis.com/css2?family=Lora&family=Noto+Serif+SC&family=Material+Icons&display=swap" />
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Lora&family=Noto+Serif+SC&family=Material+Icons&display=swap"
      media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Lora&family=Noto+Serif+SC&family=Material+Icons&display=swap" />
</noscript>

Weights (v1) #

Doc: Get Started with the Google Fonts API | Google for Developers

Ref: html - How to use italic google fonts? - Stack Overflow

http://fonts.googleapis.com/css
    ?family=Lora:400,400italic,700,700italic  # both normal and italic, regular & bold
    |Noto+Serif+SC:400,700                    # only normal, regular & bold
    &display=swap

Weights (v2) #

Doc:

Without style specifications, the API provides the default style of the requested family.

When a request doesn’t specify a position or range for an axis, the default position will be used. The default position of the italic axis is 0 (normal) and the default for the weight axis is 400 (regular).

~ CSS API update | Google Fonts | Google for Developers

Ref: Getting Variable Fonts from Google Fonts - Launch 2 Success

Getting italic variants:

https://fonts.googleapis.com/css2
    ?family=Lora
        :ital,
        wght@1,400;1,700              # only italic, regular & bold
            @0,400;0,700;1,400;1,700  # both normal and italic, regular & bold
    &family=Noto+Serif+SC
        :wght@400;700                 # only normal, regular & bold
    &text=...
    &display=swap

Optimising (v1 & v2) #

[C]onsider specifying a text= value in your font request URL. This allows Google Fonts to return a font file that’s optimized for your request. In some cases, this can reduce the size of the font file by up to 90%.

~ CSS API update | Google Fonts | Google for Developers

subset ≠ text! In Google Fonts, subset is for script types. It will most likely not reduce the font size to be downloaded.

Aside: Google Fonts via @font-face #

Subsetting #

Methodologies #

Atomic CSS #

BEM #

Refs:

Responsive iframe #

New version (aspect-ratio) #

.video-container {
  width: 100%; /* this is not the actual width */
}

.video {
  width: 95%; /* this is the actual width */
}

.video--16x9{ aspect-ratio: 16/9; }
.video--4x3{ aspect-ratio: 4/3; }

Usage:

<div class="video-container">
  <iframe
  class="video video--4x3"
  src="https://www.youtube-nocookie.com/embed/<video_id>?cc_load_policy=1&cc=1" allowfullscreen title="YouTube video" frameborder="0" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe>
</div>

Old version (padding-bottom) #

Ref: Responsive iframes — The Right Way (CSS Only)! | Ben Marshall

.video-container{
  position: relative;
  height: 0;
}
    
.video-container--4x3{ padding-bottom: 75%; }
.video-container--16x9{ padding-bottom: 56.25%; }

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Usage:

<div class="video-container video-container--4x3">
  <iframe src="https://www.youtube-nocookie.com/embed/<video_id>?cc_load_policy=1&cc=1" allowfullscreen title="YouTube video" frameborder="0" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe>
</div>

Random shadow animation #

…that I somehow made for something.

.shadow {
  box-shadow: 0 .5rem 0 rgba(0,0,0,.15);
  transition: transform 0.2s, box-shadow 0.2s;
}

.shadow:hover {
  box-shadow: 0 0.7rem 0 rgba(0,0,0,.2);
  transform: translateY(-0.2rem);
  transition: transform 0.2s, box-shadow 0.2s;
}

Skip-to-main button #

Credit: Hidden content for better a11y | Go Make Things

CSS:

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

.screen-reader-focusable:active,
.screen-reader-focusable:focus {
  display: block;       /* added */
  text-align: center;   /* added */
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: normal;
  width: auto;
}

Usage:

<body>
  <a class="screen-reader screen-reader-focusable" href="#main">Skip to the main content</a>
  <nav>Navigation elements...</nav>
  <main id="main">The main content</main>
  ...
</body>

Queries #

Refs:

Readings #

Tools/Generators #

Shadow #

Pattern #

Entertainment #