css-tricks-cheat

css-tricks-cheat.css

.foo {
     box-sizing: border-box;   //box model padding removed from size, not added to
     word-wrap: break-word;   //limited control of warping text
     white-space: nowrap;   // limited toggle of text wrapping
     text-overflow: ellipsis;   //ltd ctrl truncating text line only needs over-x: d:b or d:ib
     transform: scale(0.9, 0.9);   //scaling
     object-fit: fill; // also  cover, contain,   // bg like controls for images
     background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
     height:100vh;
     decoration-color:red; decoration-style:dotted;   //fine tune underline
     shape-outside, shape-margin and shape-image-threshold
  }
 &::-webkit-scrollbar { -webkit-appearance: none; }
 &::-webkit-scrollbar:vertical { width: 5px;}
 &::-webkit-scrollbar-thumb { border-radius: 0; background-color: $scoll-thumb-color; }
 &::-webkit-scrollbar-track { background-color: #CCCCCC;  border-radius: 0; }
:placeholder {opacity: 0.7; }   // input placeholder text
:placeholder-shown { opacity: 0.7; }   // input if it has placeholder text showing i.e. no answer
:required {}
:optional {}
:content:url()   // show url of link
content:attr(X)   // content of attribute
a[href^=tel] { text-decoration:underline }   // style phone # links on apple // requires <a href”tel:12..."
:first-letter { font-size:2rem; font-style: italic; }

/* Text-clamp truncate text by number of lines */
//if scss vars $font-size: 26px;  $line-height: 1.4;  $lines-to-show: 2;
h2.strap {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: 2.5rem;  // $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: 1rem;  // $font-size
  line-height:1.25rem ;   // $line-height
  -webkit-line-clamp:2 ;   // $lines-to-show
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}