menu
Channels
Team

Tips n' tricks

April 6, 2019 at 9:36am (Edited 3 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
3
  • 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

@alexzaworski 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
@stas-lashmanov
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
@stas-lashmanov
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 @stas-lashmanov 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