Michael Großklaus

Collecting some frontend related notes, thoughts, bookmarks and tips.

• all
• accessibility
• animations
• css
• favicons
• grid
• html
• internationalisation
• javascript
• performance
• print
• svg
• typography
• ux

1. Fri Nov 18 2022 00:00:00 GMT+0000 (Coordinated Universal Time)

   Fluid type and size calculator

   https://utopia.fyi

2. Mon Nov 07 2022 00:00:00 GMT+0000 (Coordinated Universal Time)

   TIL: Making the subtree of a hidden element visible

   If an element is hidden via visibility: hidden, its subtree can be made visible by using visibility: visible:

   parent {
     visibility: hidden;
   }
   
   child {
     visibility: visible;
   }

3. Mon Nov 07 2022 00:00:00 GMT+0000 (Coordinated Universal Time)

   Gradient border

   Without rounded corners:

   border: solid 0.25rem;
   border-image: linear-gradient(to bottom right, darkmagenta, aquamarine);

   With rounded corners:

   border: solid 0.25rem transparent;
   background:
     linear-gradient(white, white) padding-box, 
     linear-gradient(to bottom right, darkmagenta, aquamarine) border-box;

   Drawback: You need to set a solid color as background, so it cannot be transparent.

4. Mon Mar 01 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

   Numbers with same width

   With the following CSS we can make sure that numbers are all rendered using the same width (similar to monospaced fonts):

   font-variant-numeric: tabular-nums;

   This can be helpful for example for tables or when displaying prices below each other.

5. Sun Feb 28 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

   Language-specific quotation marks

   blockquote::before {
     content: open-quote;
   }
   
   blockquote::after {
     content: close-quote;
   }

6. Tue Feb 16 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

   Print in landscape

   @media print {
     @page {
       size: landscape;
     }
   }

   At the time of the tweet, it worked in blink only.

7. Tue Dec 22 2020 00:00:00 GMT+0000 (Coordinated Universal Time)

   CSS Grid tiles

   I can never remember this snippet:

   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));

   This will create equally sized columns, where 20rem is the minimum width of the columns. When they would become smaller than this, the last entry in a row moves to the next row.

   We use min(100%, 20rem) to avoid overflow when the container is smaller than 20rem.

8. Tue Dec 15 2020 00:00:00 GMT+0000 (Coordinated Universal Time)

   Utility class for hiding elements visually

   Hiding elements visually, but keeping them for screen readers:

   .u-hiddenVisually {
     position: absolute;
     width: 1px;
     height: 1px;
     margin: -1px;
     border: 0;
     padding: 0;
     white-space: nowrap;
     clip-path: inset(100%);
     clip: rect(0 0 0 0);
     overflow: hidden;
   }

   My by far most used utility class.

9. Tue Dec 15 2020 00:00:00 GMT+0000 (Coordinated Universal Time)

   URL encoder for SVG

   If you want to use an inline SVG in a CSS file: https://yoksel.github.io/url-encoder/

10. Tue Dec 15 2020 00:00:00 GMT+0000 (Coordinated Universal Time)

    System fonts

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif;

    or

    font: 1rem/1.2 BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif;

    The shorthand version cannot start with -apple-system!