📚 node [[css]]

Cool tricks with CSS.

Convention

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.

Computation

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

Vulnerabilities

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

Do not blindly copy paste

source 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:

<style>
span {
    font-family: monospace;
    position: absolute;
    color: white;
    cursor: text;
}
span::selection {
    background: #accef7;
    color: #accef7;
}
span::before {
    content: "clip";
    position: absolute;
    color: black;
}
</style>
<span>silly</span>

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

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).

📖 stoas
⥱ context
⥅ related node [[2003 12 11 css maxdesign com au]]
⥅ related node [[2003 12 18 a week with the sony ericsson t616]]
⥅ related node [[2004 01 03 sony ericsson handsfree hpr 20]]
⥅ related node [[2004 04 26 website css circa 2011]]
⥅ related node [[2004 05 16 tables vs css in web standards]]
⥅ related node [[css spinner]]
⥅ related node [[css grid]]
⥅ related node [[magit performance on minified js and css]]
⥅ related node [[purging unused css from my org publish]]
⥅ related node [[tufte css]]
⥅ related node [[purecss]]
⥅ related node [[simplecss]]
⥅ related node [[css spinners]]