Tips n' tricks
April 6, 2019 at 9:36amTips n' tricks
April 6, 2019 at 9:36am (Edited 3 years ago)I think it'd be nice to share some specific tricks we've stumbled into while grinding through these, here are some I found helpful:
position:fixed
almost always beatsposition:absolute;
- never use
rotate(180deg)
in transforms, usescaleY(-1)
- don't quote attributes, just use
+
instead of a space, eg:<img style=box-shadow:0+0+0+2px#FFF>
vs<img style="box-shadow:0 0 0 2px#FFF">
- if you use a
border-radius
of over 99% considerin
as a unit instead (eg,9in
) - in a pinch, you can add made-up attributes and select them.
<p i>
is selectable via[i]: {}
April 6, 2019 at 9:57am
oh another good one—
<p>
tags won't nest if they're adjacent, so <p><p>
will give you two paragraphs to work with without closing any tagsIf you add an inline element in a row of paragraph tags, it seems to be appended to the first and last paragraphs. eg:
<p><i><p><p>
will create 3 paragraphs, the first and last of which will have an <i>
child. This can be useful in places you'd usually reach for ::before
/::after
which are very costly when golfing thanks for the tips! 👍
FYI, I have 100% matching solutions with
rotate
or scale
…
But I am still stuck with 3 challenges at 99.9%… 😭- Margin-right trumps over margin-left when used in shorthand notation
Margin-right trumps over margin-left when used in shorthand notation
can you explain what you mean with this one?
But I am still stuck with 3 challenges at 99.9%… 😭
Yeahhhh I have had this happen, it sucks
- <img>, <p>, <a> can not be nested
- don't use px inside width, height, margin, padding
- don't use
#
in color or bgcolor - collapse values in clip-path, border-radius whenever possible
- content-box could be set right before color in a background shorthand to save an extra space
- if you happen to duplicate colors use CSS variables or background:currentColor
- border and box-shadow inherit current color
- in most cases it's safe to replace body selector with
* *
- Probably the most valuable trick: you can write
,0,
andred,color 0
in gradients to get a hard edge - You don't have to include last values of clip-path if the're zeros and it's the very last property
- Almost anything in background shorthand can be collapsed if placed correctly
- Study CSS Units to replace pixels with shorter values
if you happen to duplicate colors use CSS variables or background:currentColor
How do these save chars? Is there an edge case where it's shorter than just using the color again?
border and box-shadow inherit current color
🤔this seems usable, hadn't considered it before
I haven't found a use for this but 8-char hex colors are shorter than 'transparent', eg
#00000000
Probably the most valuable trick: you can write ,0, and red,color 0 in gradients to get a hard edge
OH MY GOD THIS SAVES ME SO MUCH
I didn't even see it the first time you posted holy crap, I was duplicating full color strings all over the place!
man the
,0,
hard stop saved me like 32 bytes across my solutions, so hugeI was up til 3 last night it's killing me