menu
Channels
Team

Tips n' tricks

April 6, 2019 at 9:36am (Edited 8 months 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 beats position:absolute;
  • never use rotate(180deg) in transforms, use scaleY(-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% consider in 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 tags
If 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
like-fill
4
  • reply
  • like
Personnaly, I use invalid tags with a trick to keep it clear but tiny even in minified code. For example my code starts with <a><b><c><d><e> and then, at the end, I use *{position:fixed which let me use these tags as I want.
Edited
  • reply
  • like
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%… 😭
  • reply
  • like
<img> also don't nest and come with default inline-block display
  • reply
  • like
  1. Margin-right trumps over margin-left when used in shorthand notation
  • reply
  • like
Margin-right trumps over margin-left when used in shorthand notation
can you explain what you mean with this one?
  • reply
  • like
But I am still stuck with 3 challenges at 99.9%… 😭
Yeahhhh I have had this happen, it sucks
  • reply
  • like
Difficult to explain. I'll try to share a codepen later when I'm with my laptop
like-fill
1
  • reply
  • like
  1. <img>, <p>, <a> can not be nested
  2. don't use px inside width, height, margin, padding
  3. don't use # in color or bgcolor
  4. collapse values in clip-path, border-radius whenever possible
  5. content-box could be set right before color in a background shorthand to save an extra space
  6. if you happen to duplicate colors use CSS variables or background:currentColor
  7. border and box-shadow inherit current color
  8. in most cases it's safe to replace body selector with * *
  9. Probably the most valuable trick: you can write ,0, and red,color 0 in gradients to get a hard edge
  10. You don't have to include last values of clip-path if the're zeros and it's the very last property
  11. Almost anything in background shorthand can be collapsed if placed correctly
  12. Study CSS Units to replace pixels with shorter values
Edited
like-fill
4
  • reply
  • like
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
  • reply
  • like
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 have found it useful in target 10.
  • reply
  • like
oooh I see, it's avoiding multiple background not multiple of the color yeah?
  • reply
  • like
I haven't found a use for this but 8-char hex colors are shorter than 'transparent', eg #00000000
  • reply
  • like
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
  • reply
  • like
I didn't even see it the first time you posted holy crap, I was duplicating full color strings all over the place!
  • reply
  • like
For transparent color use #0000
like-fill
3
  • reply
  • like
.... damn that's even better-- not currently using transparency anywhere though
  • reply
  • like
man the ,0, hard stop saved me like 32 bytes across my solutions, so huge
like-fill
1
  • reply
  • like
Obvious but useful for beginners : you always have 2 elements html and body so you can just start with the styling.
like-fill
1
  • reply
  • like
You also have <head> and <style> itself 😉
  • reply
  • like
praveen do you have any tips for #7 without spoiling the whole thing? was I on the right track?
  • reply
  • like
I was up til 3 last night it's killing me
  • reply
  • like
Margins of html and body add up. So one can use the * selector to set theargins appropriately
  • reply
  • like
The margins *
  • reply
  • like
Also, I used box shadow for this as well without the img tag. Just use * selector
  • reply
  • like
Show more messages