CSSBattle

Thierry Michel@thierrymichel

9:57am

oh another good one—  tags won't nest if they're adjacent, so  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:  will create 3 paragraphs, the first and last of which will have an  child. This can be useful in places you'd usually reach for ::before/::after which are very costly when golfing

Klemek@klemek

1:18pm

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><c><d><e> and then, at the end, I use *{position:fixed which let me use these tags as I want.

Edited

1:29pm

@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%… 😭

2:45pm

<img> also don't nest and come with default inline-block display

2:46pm

Margin-right trumps over margin-left when used in shorthand notation

3:04pm

Margin-right trumps over margin-left when used in shorthand notation

can you explain what you mean with this one?

3:04pm

But I am still stuck with 3 challenges at 99.9%… 😭

Yeahhhh I have had this happen, it sucks

3:07pm

Difficult to explain. I'll try to share a codepen later when I'm with my laptop

3:41pm

<img>, , <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, and red,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

Edited

3:47pm

@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

3:49pm

I have found it useful in target 10.

3:50pm

oooh I see, it's avoiding multiple background not multiple of the color yeah?

4:19pm

I haven't found a use for this but 8-char hex colors are shorter than 'transparent', eg #00000000

4:21pm

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

4:21pm

I didn't even see it the first time you posted holy crap, I was duplicating full color strings all over the place!

4:26pm

For transparent color use #0000

4:27pm

.... damn that's even better-- not currently using transparency anywhere though

4:28pm

man the ,0, hard stop saved me like 32 bytes across my solutions, so huge

4:30pm

Obvious but useful for beginners : you always have 2 elements html and body so you can just start with the styling.

4:31pm

You also have <head> and <style> itself 😉

4:34pm

praveen do you have any tips for #7 without spoiling the whole thing? was I on the right track?

4:34pm

I was up til 3 last night it's killing me