CSS know-how

¶USE F12 + AUTOCOMPLETE TO FIND COLORS

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

¶HIDE SCROLLBAR <overflow>
 
https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll
(hackish)
 
 
 

¶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;
"""
 
 
 
 

¶UNDERLINE THICK+STYLE
 
https://www.w3schools.com/cssref/pr_text_text-decoration.asp
https://stackoverflow.com/questions/13840403/edit-line-thickness-of-css-underline-attibute?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
 
"""
    text-decoration: none;
    border-bottom: 10px solid black;
"""
 
 
 

¶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
    * [...]

¶@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

¶specificity (element priority) explained

https://specifishity.com/ hehe nice
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#Specificity_2

¶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”"

¶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;
}
"""

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

¶[!!*] 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

"""

¶[!] 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

¶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/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— 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
* [...]

¶[!] 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.

¶LANG— cubic-bezier() func ?

for transitions ...

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_func_cubic-bezier

¶[!!] LANG/102— FLEXBOX ?

https://www.w3schools.com/css/css3_flexbox.asp
https://medium.com/swlh/how-i-use-flexbox-to-create-a-one-page-website-81db78e61738
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

learn !!!


 

¶[!!→] FUTURE— JS Charts
 
https://mdbootstrap.com/javascript/charts/
 
 

¶[!!*] PRETTY— SVG TEXT
 
https://www.hongkiat.com/blog/scalable-vector-graphics-text/
 

 

¶function: translateY
 
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY

¶[!] 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;

¶[!!] 102— learn: selectors !
https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048