CSS

Tips, Examples and Resources

Recently discovered…

env()

Can I use env()

Example, accounting for the safari toolbar in iOS versions 14 and 15, this css may be useful.

  #modal {
    /* overflow: scroll; */
    width: 100vw;
    position: fixed;
    height: calc(100vh - env(safe-area-inset-bottom));
  }

Reference

Centering Content

Images Larger than Container

This will center the image inside of a element when the elements height and/or width is smaller than the image. This works well when you have image assets of various aspect ratios that you want to display as thumbs that are the same size.

Browser Extensions

Extension Layout Engine Browsers -webkit- WebKit Safari, Chrome -moz- Gecko Firefox -ms- Trident Internet Explorer -o- Presto Opera Resources Autoprefixer CSS online Comparison of layout engines (Cascading Style Sheets) - Wikipedia, the free encyclopedia List of web browsers