Web development

random assortment of HTML/CSS knowledge I return to often.

iframe targetting

CSS units

• [px] for percision, may look different based on displays
• [em, rem] based on font size, works okay for selecting font sizes or anything with text.
• [vh (viewport height), vw (viewport width)] height and width of the viewport, in percentages.
• [dvh (dynamic vh), dvw (dynamic vw)] same as ordinary viewport units but account for things like search bar on mobile.
• [%] i am honestly not sure when i would use percents except when i declare that an element has a width/height of 100% but even then i could use viewport units and they work better, but percents have a use especially for older browsers that don't do viewport units

box-sizing

by default, borders aren't included in the dimensions of an element.

border-box means borders are included as part of the element, save the headache and do this.

* {
            box-sizing: border-box;
       -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

the perfromance hit of the universal selector [*] barely matters nowadays, so it should be okay for applying simple effects (so no animations, shadows, filters, etc..) on a basic site.

shape-outside

allows wrapping text smoothly around an element shaped as a square, circle, a polygon with specified boundaries, or an image.