- padding instead of width and height
-
-
- : → instead of position left & top
-
- alt code
- html entities windows+;
- special character
Special Characters - Alt Keyboard Sequences
Alt Codes - How to Type Special Characters and Keyboard Symbols on Windows Using the Alt Keys
- Margin-right trumps over margin-left when used in shorthand notation
position:fixed
almost always beatsposition:absolute;
- top and left > right and bottom
- never use
rotate(180deg)
in transforms, usescaleY(-1)
- For transparent color use #0000
- bgcolor:8921831 = background:#8921831
<p style=>
<style>
*{
margin:var(--);
padding:var(--p);
background:var(--g,);
border-radius:var(--o);
box-shadow:var(--b);
position:fixed;
}
- 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]: {}
-
tags won't nest if they're adjacent, so
will give you two paragraphs to work with without closing any tags
- you don't need an extra space if you're using percentages.
- ,
, 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
-
abcde
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.
- #0000 if background color is needed
background:radial-gradient(circle,#f3ac3c 21%,#1a4341 1q)
background:radial-gradient(circle,#f3ac3c 21%,#1a4341 0)
- what repeats the most take - - not - -g or - - p
body NOT style
<body bgcolor=0B2429 style=padding:67+167>
<p style=padding:75;border-radius:67%0;background:#f3ac3c;
box-shadow:-53q+0#998235,-106q+0#1a4341>
/* q -> cm */
126q=4cm
/* px -> cm */
1cm = 37.795px
1 cm 37.7952755906 pixel (X)
2 cm 75.5905511811 pixel (X)
3 cm 113.3858267717 pixel (X)
5 cm 188.9763779528 pixel (X)
10 cm 377.9527559055 pixel (X)
/* px -> pc/em */
16px=1pc=1em
64px=4pc=4em
70 PX = 6.0021925528099E-19 pc
1em 16px
2em 32px
4em 64px
5em 80px
25em 400px
50em 800px
75em 1200px
/* px -> q */
/* px -> pt */ *** 100px ------> 132px ====pt best
12px 9pt
16px 12pt 1em 100%
100px 75pt
/* px -> in */
1 in 96 pixel (X)
2 in 192 pixel (X)
3 in 288 pixel (X)
5 in 480 pixel (X)
/* px -> ex */
1ex = 7.156px, 32ex = 229px
/* px -> ch */
1ch = 8px
-
px to %
/* px -> % */ 1px 6% 2px 13% 3px 19% 4px 25% 5px 31% 6px 38% 8px 50% 10px 63% 12px 75% 14px 88% 15px 94% 16px 100% 18px 113% 20px 125% 24px 150% 25px 156% 28px 175% 32px 200% 36px 225% 40px 250% 44px 275% 48px 300% 50px 313% 56px 350% 64px 400% 72px 450% 75px 469% 80px 500% 90px 563% 100px 625%
-
vw to px
VW Pixel 1 vw 19.2 px 2 vw 38.4 px 3 vw 57.6 px 4 vw 76.8 px 5 vw 96 px 6 vw 115.2 px 7 vw 134.4 px 8 vw 153.6 px 9 vw 172.8 px 10 vw 192 px 11 vw 211.2 px 12 vw 230.4 px 13 vw 249.6 px 14 vw 268.8 px 15 vw 288 px 16 vw 307.2 px 17 vw 326.4 px 18 vw 345.6 px 19 vw 364.8 px 20 vw 384 px 21 vw 403.2 px 22 vw 422.4 px 23 vw 441.6 px 24 vw 460.8 px 25 vw 480 px
-
vh to px
VH Pixel 1 vh 19.2 px 2 vh 38.4 px 3 vh 57.6 px 4 vh 76.8 px 5 vh 96 px 6 vh 115.2 px 7 vh 134.4 px 8 vh 153.6 px 9 vh 172.8 px 10 vh 192 px 11 vh 211.2 px 12 vh 230.4 px 13 vh 249.6 px 14 vh 268.8 px 15 vh 288 px 16 vh 307.2 px 17 vh 326.4 px 18 vh 345.6 px 19 vh 364.8 px 20 vh 384 px 21 vh 403.2 px 22 vh 422.4 px 23 vh 441.6 px 24 vh 460.8 px 25 vh 480 px
if the property
*{margin:var(--);background:var(--g,#191919);padding:var(--p);position:fixed}p{border:10px solid#5DBCF9
turns it to
*{background:var(--g,#191919);padding:var(--p);position:fixed}p{border:10px solid#5DBCF9;margin:var(--
/
border-color:#fff
border-color:fff
border-radius: 100px / 80px;
How I approach these. a few things right off the bat to help in your code golfing.
- Remove all spaces, put everything on one line when you're done.
- A
<p>
will be a block level element in fewer characters than<div></div>
- You don't need to close elements, the browser will do it for you, this includes the
</style>
at the end. - Remove the last
;
in every selector. - Remove the last
}
on the last selector in our sheet - If you set a
color
it will be the default value forborder
andbox-shadow
color
allows you to set a hex without the#
- Always try to get the smallest units for values
- So in this case
100vw
=400px
, so instead of using20px
I can use5vw
to save a character
padding, margin, top, left, bottom, right
will automatically usepx
and you don't need to type it.- Using `` instead of
html
saves 3 characters and applies it to `html`, `body`, and all elements inside - You can stack
box-shadow
with commas
- Setting an
inset 0 9in,
shadow basically means make the biggest spread shadow on the inside and is fewer characters than addingbackground:#FE5F55
to your selector
- Setting
margin
values is fewer characters than settingheight, width, top, and left
I hope this helps give some tips on how to get hacky higher scores.
<p><style>*{background:#293462;border-radius:5vw}body{color:FE5F55;margin:90 100 110;padding:30;box-shadow:inset 0 9in,0 5vw#A64942}p{padding:20 70;background:#A64942
- a
- b
- bdo
- bdi
- del
- img
- ins
- q
- s
- u
- wbr
- big
- br
- dfn
- em
- i
- kbd
- sub
- sup
- tt
- var
- h1-6
- dd
- dl
- dt
- hr
- li
- ol
- pe
- pre
- ul
- button
- img
- select
- input & textarea in chrome