CSS - atabegruslan/Notes GitHub Wiki

CSS

Good Practice

Defer & Async

Defer:
CSS files are render-blocking resources: they must be loaded and processed before the browser renders the page. Web pages that contain unnecessarily large styles take longer to render. defer defers non-critical CSS.

  • If async is present: The script is downloaded in parallel to parsing the page, and executed as soon as it is available (before parsing completes)
  • If defer is present (and not async): The script is downloaded in parallel to parsing the page, and executed after the page has finished parsing
  • If neither async or defer is present: The script is downloaded and executed immediately, blocking parsing until the script is completed

https://web.dev/defer-non-critical-css

Font-size, accessability

These are the available CSS font-size units: https://www.w3schools.com/cssref/css_units.asp
Most notably: em and rem.
Take this setting for example: <p>Some text<span>Some more text</span></p>:

  • For em: If p is set to have font-size of 30px, and then you give span a font-size of 0.5em, then span will have a font-size of 15px.
  • For rem: If the root element (normally <html>) have a font-size of 30px, and then you give span a font-size of 0.5em, then span will have a font-size of 15px.
    With that background knowledge, we can start talking about the visually-impared: https://whitep4nth3r.com/blog/how-to-make-your-font-sizes-accessible-with-css/
    In Chrome, a user can go to settings > appearance > font size and set font size to XL, L, M, S or XS.
    What you, as a developer should do next is:
  • Set the root element to: html { font-size: 100% }
  • Use rem as font units for all the text elements.

attr vs data

Read: https://coderwall.com/p/t_cgwq/when-is-better-to-use-data-or-attr

Note, If you are programming a website for iPhone Safari, data-{stuff} will be lost. Better to use attr.

Add lens flare

https://css-tricks.com/add-a-css-lens-flare-to-photos-for-a-bright-touch

⚠️ **GitHub.com Fallback** ⚠️