Cool tricks with CSS.


Don't use Margin

[Don't use Margin]

Margin breaks component encapsulation because components impact everything surrounding them and external to them. It also makes reusability difficult and impacts external components. The stack component, similar to other spacer components, is useful for adding arbitrary spaces internal to and external from different components. THese help define discrete units for space as well which can be standardized across the application.


CSS can do a lot more than we use it for: it can [count] , for one.


[saizai/cssfingerprint: a research project to see how well the CSS history hack can fingerprint a user]

Do not blindly copy paste


In this code segment, it's trivial to hide the truth of the text that's being copied, thus resulting in a blind paste into terminal being malicious:

span {
    font-family: monospace;
    position: absolute;
    color: white;
    cursor: text;
span::selection {
    background: #accef7;
    color: #accef7;
span::before {
    content: "clip";
    position: absolute;
    color: black;

One way the author recommends safe pasting is via this command:

alias prepaste='builtin fc -e "vim -c %d -c \"set paste\""'

This opens the line pasted in vim before sending it to the browser, encouraging you to preview and edit it.

Alignment tricks!

[Ten modern layouts in one line of CSS]


transform() operations occur outside of the flexbox algorithm, so things can be displayed with flexbox then instantly transformed to their proper position as desired. This also allows us to place an element entirely out of the document flow! (adding a 'close' button, for example).

2022-11-08 07eac36
2022-11-01 7b2064e
2021-09-22 52a677b
2021-09-21 7732812
2021-08-19 87d9551
2021-08-13 538cc33
2021-04-24 d005e33
2021-04-10 2a6dd6f
2021-04-08 da8dedc
2021-02-26 4443a67
2021-01-28 b665031
2021-01-20 35e386e
2021-01-18 af0b1e0
2021-01-15 446991d
2020-11-15 a0eccac