Safari doesn't support position: relative on <tr> elements
This is a problem if you want whole table rows to be clickable. Luckily there's a (hacky) workaround.
CSS
Safari doesn't support
*Vertical* centering in CSS with margin: auto
Published on in CSS and CSS for JS Devs course
margin: auto is not only for horizontal centering.
position: fixed breaks if any of its ancestors uses transform
Published on in CSS and CSS for JS Devs course
Or perspective or filter.
This can easily cause confusing bugs.
Different logics behind heights and widths in CSS
Published on in CSS and CSS for JS Devs course
height and width work somewhat differently in CSS.
height looks "down" the tree
whereas width looks "up" the tree.
Block vs inline directions in CSS
Published on in CSS and CSS for JS Devs course
Block elements stack on top of each other. Inline elements are placed side by side.
Firefox DevTools can explain why some CSS styles have no effect
Published on in CSS and CSS for JS Devs course
Last updated on
It's frustrating when a CSS declaration is technically valid (not crossed out in the browser's DevTools) but has no effect for some reason. Firefox DevTools can often tell you why and also how to potentially fix those issues! (Update: Chrome 108+ can too.)
Smoother CSS animations with the will-change property
Published on in CSS
The will-change property makes the browser render an element with the GPU,
which can reduce jankiness and also allows utilizing sub-pixel rendering.
But use the property sparingly.
CSS: display: flow-root is better than the clearfix hack
Published on in CSS
The flow-root value is clearer (no hacks!)
and has great browser support.
Action-driven CSS animations
Published on in CSS
Polish your animations by animating based on actions or events, like mouse-enter and mouse-leave, instead of animating based on states, like default and hover state.
Locality of Behavior / Co-location
Published on in Clean code, CSS and JavaScript
Last updated on
These two similar principles state that the behavior of code should be obvious on inspection and that code should be located where it's relevant.
contenteditable + ::first-letter + Chrome = buggy combo
Published on in CSS
Last updated on
This combination causes weird behavior and data loss
because of a bug in Chrome,
so it's best not to use contenteditable and ::first-letter together.