Simple Way to Validate CSS Colors
function isColor(col) {
const cache = isColor[col]
if (cache != null) {
console.log('- reading cache')
return cache
}
isColor.el.style = ''
isColor.el.style.color = col
return isColor[col] = !!isColor.el.style.color
}
isColor.el = document.createElement('div')
console.log('is "red" a color?', isColor('red'))
console.log('from the cache: ', isColor('red'))
console.log('is "rgbx(1, 2, 3)" a color?', isColor('rgbx(1, 2, 3)'))
console.log('is "#0f0" a color?', isColor('#0f0'))
console.log('is "hsl(192, 50%, 50%)" a color?', isColor('hsl(192, 50%, 50%)'))
console.log('from the cache: ', isColor('hsl(192, 50%, 50%)'))
console.log('is "lab(2000.1337% -8.6911 -159.131231 / .987189732)" ?',
isColor('lab(2000.1337% -8.6911 -159.131231 / .987189732)'))
console.log('is "snippetZone" ?', isColor('snippetZone'))
I find this technique is usually good enough to validate colors…
Toggle a Class
// lazy hack for css
document.body.innerHTML = `
<style>
button {
cursor: pointer;
}
.red {
background-color: red;
}
</style>
`
const btn = document.body.appendChild(
Object.assign(
document.createElement('button'),
{ innerText: 'click me' }
)
)
btn.addEventListener('click', e => {
e.target.classList.toggle('red')
})
classList.toggle
brings back memories…
Multiple Class Trick
.thing.thing.thing {
color: green;
}
.thing.thing {
color: red;
}
.thing {
color: blue;
}
What color would p.thing
be?
Odd Gradient Notation
// "Being clever is not clever"
// -- Bjarne Stroustrup
D = document
ang = {
'|': 180,
'-': 90,
'\\': 135,
'/': 225
}
box = def => {
def = def.split(/\s+/)
form = def.length
I = i => parseInt(def[i], 16)
;[,,, _=>{x = y = I(0); w = h = I(1); c = def[2]},
_=>{x = I(0), y = I(1); w = h = I(2);c = def[3]},
_=>{x = I(0); y = I(1); w = I(2); h = I(3); c = def[4]}
][form]()
c = c.split``
ca = c[0]
ca = ca+ca+ca
cD = ang[c[1]]
cb = c[2]
cb = cb+cb+cb
D.body.appendChild(
D.createElement`div`
).style = `
position: absolute; left: ${x}px; top: ${y}px;
width: ${w}px; height: ${h}px;
background: linear-gradient(${cD}deg, #${ca}, #${cb})
`
}
const parse = prog => prog.trim()
.split(/\n+/m)
.map(line => box(line.trim()))
parse(`
0 64 0/f
64 64 0\\f
a0 f0 30 54 f\\0
0 6f 20 60 0-c
f 7f 20 60 0|c
1f 8f 30 30 c/0
`)
Just playing around… odd micro-gradient notation:
'0 64 0/f'
// x=0 y=0 width=0x64 height=0x64
// 0/f = gradient black to white top right to bottom left
'64 64 0\\f'
// x=0 y=0 width=0x64 height=0x64
// 0\\f = black to to white gradient top left to bottom right
'0 6f 20 60 0-c'
// x=0 y=0x6f width=0x20 height=0x60
// 0-c = gradient black to grey (#ccc) left to right
// etc... ( | ) is top to bottom grad
CSS Checkbox
<div class="toggle">
<input class="check" type="checkbox" tabindex="0">
<label></label>
</div>
<style>
.toggle {
position: relative;
}
.check {
position: absolute;
width: 3rem;
height: 3rem;
margin: 0;
opacity: 0;
cursor: pointer;
}
label {
position: absolute;
pointer-events: none;
content: '';
width: 3rem;
height: 3rem;
background: black;
cursor: pointer
}
.check:checked + label {
background: red;
}
</style>
Quick css checkbox. I used to do this all the time and feel like maybe there was a better way… anyway, this is what I did to get it working fast…