CSS know-how


< DRAFT >

Revisions:
    xxxxxxxx
    20191010 touch
    20200810 (RFC→DRAFT)
    20220325 (in use)
    20230317 (quick headering)

Table of Contents
1 *** TRICKS
1.1 USE F12 + AUTOCOMPLETE TO FIND COLORS
1.2 HIDE SCROLLBAR <overflow>
1.3 MEDIA QUERIES (can give you "min-left")
1.4 Z-INDEX (layers)
1.5 TEXT OVERFLOW
1.6 UNDERLINE THICK+STYLE
1.7 Cool psychedelic TEXT COLOR TRANSITIONS (got from "CSS-DEFAULT")
1.8 CSS SELECTOR TRICKS
1.9 FONT WEIGHTS
1.10 "Outline" text effect
1.11 TEXT COLOR "none" = "transparent" !
1.12 CSS VARIABLES aka CUSTOM PROPERTIES !!!
1.13 SYSTEM FONTS, and replacements
1.14 OVERFLOW-X (used for side TOC stuff)
1.15 Changing color gradients
1.16 Wow! Using webfonts !
1.17 @import statements
1.18 use coolors.co palette picker
1.19 specificity (element priority) explained
1.20 SVG patterns
1.21 variable font sizes
1.22 SVG animations (SMIL, etc)
1.23 Cursors!
1.24 [!!**] E2H/E2X— GRIDS
1.25 Select elements by their attributes!
1.26 [!] vmin/vmax & min-height, max-width etc
1.27 (homegrown) FILTER VIA CSS ONLY (ATTRIBUTE MATCHING!)
1.28 ::before and ::after
1.29 CENTERING in div! (horizontal and vertical)
2 *** NEW, USE MORE, LEARN
2.1 [!!*] RESPONSIVE/COOL— min(), max(), clamp()
2.2 [!!*] PRETTY/TRICK— gradient link & gradient outlines
2.3 [!!!*] E2H/BUG— text-size-adjust ... is this fucking up my Android mobile brower fonts? (and other proper "css reset" issues)
2.4 [!] LANG— please make :has() asap
2.5 [!!] LANG— select adjancent element with sibling (not possible without incoming ":has()")
2.6 [!!*] PRETTY?— anti-aliasing font?
2.7 102— block vs inline-block vs inline
2.8 [!] SVG hacking (with js)
2.9 103— Complex css selectors
2.10 PRETTY/TOTALISM— Parallax scrolling
2.11 TRICKS— scrollbar configuring!
2.12 "clear floats"
2.13 BUG— Firefox bug: using css "filter" breaks whole layout
2.14 TRICKS— ellipsis: truncate strings 
2.15 [!!**] TRICKS/PRETTY/FUTURE— LCH colorspace :O
2.16 Column Breaks (break-after, break-inside) !
2.17 TRICKS/WOW— Hiding images in CSS selections :o
2.18 102— What can be CSS animated? (keyframes)
2.19 ... And future of CSS animations
2.20 TRICKS— EVERYTHING (also HTML) IN CSS !
2.21 USEFUL— CHECK NEW GRAPH STUFF (SVG/CSS)
2.22 TYPOGRAPHY RESOURCE !!!!!! #TOREAD
2.23 [!] SPEED— RESPONSE TIMES + OPTIMIZATION
2.24 [!] PRETTY/DYNAMIC— "transition" property
2.25 102— link pseudo classes order ???
2.26 102/LANG— calc() func !!!!!!
2.26.1     with rgba
2.27 LANG— attr() func ?
2.28 LANG— cubic-bezier() func ?
2.29 [!!] LANG/102— FLEXBOX ?
2.30 [!!→] FUTURE— JS Charts
2.31 [!!*] PRETTY— SVG TEXT
2.32 function: translateY
2.33 [!] LANG/101— LINE COMMENTS
2.34 [!!] 102— learn: selectors !


*** TRICKS


USE F12 + AUTOCOMPLETE TO FIND COLORS

Super interactive styler!
Especially for main backgrounds and such :)



MEDIA QUERIES (can give you "min-left")
 
"""
@media (max-width: 700px) {
  .xyz {
    left: 10px;
  }}
"""
 
 
 
Z-INDEX (layers)
 
"""
    z-index: 1100;
"""
 
Useful for hovers, to bring stuff in front!
 
 
 
 
TEXT OVERFLOW
 
"""
text-overflow: ellipsis;
 
/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden;
"""
 
 
 
 
Cool psychedelic TEXT COLOR TRANSITIONS (got from "CSS-DEFAULT")
 
"""
transition-delay: 0s;
transition-duration: 0.3s;
transition-property: all;
transition-timing-function: ease;
 
transition:all 0.5s ease;/*i just moved this from anchor*/
"""
 
 
 
CSS SELECTOR TRICKS
 
h1:nth-of-type(2n) {
    background: pink !important;
    float: left;
}
h1:nth-of-type(2n+1) {
    float: right;
    background: red !important;
}
 
div:nth-child(even) {
    background: green !important;
}
div:nth-child(odd) {
    background: pink !important;
}
 
h1:nth-of-type(2n) {
    background: pink !important;
    float: left;
}
h1:nth-of-type(2n+1) {
    float: right;
    background: red !important;
}
 
div > h1:first-child {
    background: pink !important;
}
 
div > h1:last-child {
    background: orange !important;
}
 
h1:nth-child(odd) {
    background: green !important;
    top: 300px;
}
 
h1:nth-child(even) {
    background: blue !important;
    top: 200px;
}
 
 
 
FONT WEIGHTS
 
http://htmldog.com/references/css/properties/font-weight/
 
400=normal
700=bold
 
 
 
"Outline" text effect
 

__________ WITH SHADOW
/*
    color: white !important;
    text-shadow: 1px 1px 0px black, -1px -1px 0px black !important;
*/

__________ WITH STROKE

"""
-webkit-text-stroke: 2px var(--Tf, silver) !important;
-webkit-text-fill-color: var(--Tb,var(--BG))  !important;
"""
 
 
TEXT COLOR "none" = "transparent" !
 
!




CSS VARIABLES aka CUSTOM PROPERTIES !!!
 
https://css-tricks.com/difference-between-types-of-css-variables/
 
"""
More recently, native CSS has started supporting CSS variables, or "CSS Custom Properties". It allows you to work with variables directly in CSS. There is no compiling.
"""

________________________________

How?
 
"""
:root {
  --main-color: #F06D06;
}
.main-header {
  color: var(--main-color);
}.main-footer {
  background-color: var(--main-color, var(--fallback-color, and_so_on));
}
"""


________________________________


Next:
    * can this be done together with @include ?
    * [...]

My example:
    🔗theme-xyz-css + 🔗theme-olivegreen-css!
 
 
 

SYSTEM FONTS, and replacements

Via:
    * https://stackoverflow.com/questions/884177/how-can-i-determine-what-font-a-browser-is-actually-using-to-render-some-text

Check:
    Inspector has a "Fonts" box.

State:
    * Ubuntu 14.04 has Arial 
    * Ubuntu 18.04 has Liberation Sans
    * Windows: ???
    * Mac: ???
    * Android: ???
    * [...]

Ubuntu 14.04 (with msfonts package):
    * sans serif == DejaVu Sans
    * helvetica = Nimbus !!
    * Arial = Liberation Sans
    * [...]

Ubuntu 18.04 (without, I think):
    * nothing == Ubuntu Mono
    * helvetica == Deja Vu Serif
    * helveticdsijfdsfsda == Deja Vu Serif
    * sans-serif == Deja Vu Sans
    * Arial == Liberation Sans
    * "Times New Roman", Times, serif  == Liberation Serif
    * "Arial, Helvetica, sans-serif" == Liberation Sans
    * "Arial Black", Gadget, sans-serif" == Deja Vu Sans
    ---------------------------
    * font-family: helvetica, arial; --> Liberation Sans
    * font-family: helvetica, arial;
    * [...]


___  ___  ___  ___  ___  ___  ___  ___  ___  

#Todo :
    * Maybe would be a good idea to have more controlled test pages for this.
    * Also some stuff like "Edit" buttons should still look good ... So have proper dynamic styles without breaking ...




Changing color gradients

"""
body {
    background: red;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, red, yellow);  /* Chrome 10-25, S
    background: linear-gradient(to right, red, yellow); /* W3C, IE 10+/ Edge, Firef
}
"""

see:
    * 🔗theme-dye2-css
    * [...]




Wow! Using webfonts !

See example of 🔗theme-grk-css !  :)



@import statements

https://developer.mozilla.org/en-US/docs/Web/CSS/@import

"""
@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen;
@import url('landscape.css') screen and (orientation:landscape);
"""

________________

"""
@import url("e2t.php?_=css-sidetoc-real-css&mime=css") screen and (orientation:landscape);
"""



use coolors.co palette picker

https://coolors.co
it's probably the best



SVG patterns

resources:
    * https://www.heropatterns.com/
    * [...]

also see → 🔗test-datapad !!!



variable font sizes

this gives a good suggestion
https://stackoverflow.com/questions/15649244/responsive-font-size-in-css
"""
font-size: calc(12px + 1vw)
"""

great article on this
https://www.lullabot.com/articles/unexpected-power-of-viewport-units-in-css

the canonic e2h example:
    https://pad.land as of 20201116 1816


________

"rem" (root em) unit is interesting
https://snook.ca/archives/html_and_css/font-size-with-rem
with IE7 compatibility tips lol who gives a shit



SVG animations (SMIL, etc)

ties to +three.js also

https://css-tricks.com/guide-svg-animations-smil/
"""
The following is a guest post by Sara Soueidan. Sara has a knack for digging deep into web features and explaining the heck out of them for the rest of us. Here she digs into SMIL (and friends), and animation syntax built right into SVG, and gives us this epic guide.
"""

"If you prefer using JavaScript, I recommend using snap.svg by Dmitry Baranovsky, which is described as being “the jQuery of SVG”"


[!!**] E2H/E2X— GRIDS

🔗grid-blocks-css



Select elements by their attributes!
(CSS attribute selector)

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

this kicks ass
"""
.paradiv:not([nick*="TOTALISM" i]) {
    background: magenta !important;
    color: white !important;
    display: none !important;
}
.paradiv[nick*="TOTALISM" i] {
    background: cyan !important;
    color: white !important;
}
"""


(homegrown) FILTER VIA CSS ONLY (ATTRIBUTE MATCHING!)

see → 🔗css-filter-css !


::before and ::after

https://www.w3schools.com/cssref/sel_before.asp

example
"""
h1::before { 
      background-color: #111;
      color: #CCC;
      position: relative; top: -0.5em; font-size: 80%;
      font-weight: bold;
      font-style: italic;
      content: "(2)";
      padding: 3px 1px 3px 1px;
      border-radius: 10px;
 } 
 """


CENTERING in div! (horizontal and vertical)

https://stackoverflow.com/questions/79461/how-can-i-vertically-align-elements-in-a-div

https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically
"""
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
"""


    ↑ KNOWN AND REGULAR 
<------------------------------------ (new):
    ↓ WEIRD AND UN-/RARELY USED




*** NEW, USE MORE, LEARN


[!!*] RESPONSIVE/COOL— min(), max(), clamp()

https://web.dev/min-max-clamp/

"""
To recap:
  • min(<value-list>): selects the smallest (most negative) value from a list of comma-separated expressions
  • max(<value-list>): selects the largest (most positive) value from a list of comma-separated expressions
  • clamp(<min>, <ideal>, <max>): clamps a value between an upper and lower bound, based on a set ideal value
"""



[!!*] PRETTY/TRICK— gradient link & gradient outlines

https://zellwk.com/blog/multi-line-gradient-links/



[!!!*] E2H/BUG— text-size-adjust ... is this fucking up my Android mobile brower fonts? (and other proper "css reset" issues)

https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/


[!] LANG— please make :has() asap
###


[!!] LANG— select adjancent element with sibling (not possible without incoming ":has()")

example:
    br+s = ok
    br+s>em = does not work, no way to do it:
        something for 🔗CSS-default ...

alternatives:
    A) regex that would select them, tag them properly
    B) wait for :has()
    C) ###



[!!*] PRETTY?— anti-aliasing font?

maybe sth like this
/*
html,body {
      -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
}
*/
more:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
https://stackoverflow.com/questions/17864742/how-to-apply-font-anti-alias-effects-in-css



PRETTY/TOTALISM— Parallax scrolling

###
like, for main site (the graph) of 2021-12-21 would be great



TRICKS— scrollbar configuring!

WARNING: FIREFOX DOES NOT PLAY BALL (as of 2021/12)

https://css-tricks.com/almanac/properties/s/scrollbar-width/



BUG— Firefox bug: using css "filter" breaks whole layout

20201112

"""
.etherpad_container {
filter: hue-rotate(0deg);
}
*/

_________________

but this works
"""
.etherpad_toc {
    background: blue !important;
    filter: invert();
}
"""



TRICKS— ellipsis: truncate strings 

https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

maybe for TOC?



[!!**] TRICKS/PRETTY/FUTURE— LCH colorspace :O

https://css.land/lch/
they're perfect
!!! adopt this when browsers do

https://github.com/Fyrd/caniuse/issues/5348
etc



Column Breaks (break-after, break-inside) !
(20200101)
:
    * https://tympanus.net/codrops/css_reference/break-after/
    * https://css-tricks.com/almanac/properties/b/break-inside/
    * [...]

via: 🔗planning would look great ... if there was instructions on left, people on right half ...



TRICKS/WOW— Hiding images in CSS selections :o

https://twitter.com/_w0bb1t_/status/1181488137563979776



TRICKS— EVERYTHING (also HTML) IN CSS !

https://twitter.com/ScottKellum/status/1140388065132863493

#E2H #FEATURE ... could be used for:
    * HTML blocks?
    * variable values?
    * [...]



USEFUL— CHECK NEW GRAPH STUFF (SVG/CSS)

* 🔗:graph-experiment
* 🔗:graph-new
* [...]



TYPOGRAPHY RESOURCE !!!!!! #TOREAD

https://practicaltypography.com/line-length.html




[!] SPEED— RESPONSE TIMES + OPTIMIZATION

measure:
    https://www.shellhacks.com/check-website-response-time-linux-command-line/
    $ __net_timesite

optimize:
    * better server (now all E2H requests are ~0.7s)
    * join files for less requests
    * [...]



[!] PRETTY/DYNAMIC— "transition" property

Try !!!
via https://stackoverflow.com/questions/6008324/fade-effect-on-link-hover

"""
    transition: 0.4s;
"""

Nice use on links:
    https://violet.is/



102— link pseudo classes order ???

"""
And you may already know to code the link pseudo-classes in the correct order: link, visited, hover, and active. Many CSS coders remember the order via the mnemonic “LoVe over HAte”.
"""

WTF !!!!!!
Check if i fucked something up there.



102/LANG— calc() func !!!!!!

"""
    width: calc(100% - 100px);
"""

https://css-tricks.com/a-couple-of-use-cases-for-calc/
""It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/). Being able to do math in code is nice and a welcome addition to a language that is fairly number heavy.""

You can also add units this way.

    with rgba

color: rgba(0,0,255,0.5);
"last unit is transparency"

So something like this could be worked out?



[!!→] FUTURE— JS Charts
 
https://mdbootstrap.com/javascript/charts/
 
 
[!] LANG/101— LINE COMMENTS

https://www.xanthir.com/b4U10
"""
That said, CSS does actually already allow you to use //, after a fashion.  It's not quite a line comment, but a next construct comment.
"""

What works:
    // this is fine;
    // some characeters fuck it up, like ' !!! so this is not fine;