Оригиналът е на Joey Burzynski, който показва някои специфични тънкости в CSS и HTML и предизвика неочаквано много коментари
Когато правех своя уеб сайт исках да намеря някакъв съвсем лесен, логичен и разумен начин да до направя красив и приятен за възможно най-много и най-различни дисплеи. За тази цел се оказаха подходящи следните 58 байта:
main {
max-width: 38rem;
padding: 2rem;
margin: auto;
}
Нека да се спрем по-подробно.
- max-width: 38rem
По всичко личи, че в повечето браузъри по подразбиране се използва шрифт с размер 16px – тоест, 38rem са 608px. Поддръжката на дисплеи с резолюция минимум 600px ми изглежда един съвсем разумен избор - padding: 2rem
Ако ширината на дисплея е по-малка от 38rem, то тогава благодарение на този отстъп всичко остава красиво и приятно до ширина около 256px. По принцип това изглежда незадължително, но по този начин с един куршум убиваме два заека: отстъпът създава необходимото пространство и отгоре и отдолу - margin: auto
Това е всичкото, което е необходимо за центрирането на страницата, защото main е блоков елемент от HTML5 семантиката
Важна забележка: за да постигна този резултат ми се наложи да правя учудващо много опити, проби и грешки. Може би това се дължи на факта, че аз нищо не зная за „съвременното“ уеб програмиране или (което съм по-склонен да приема) колко трудно стана да запазим простотата и лекотата в този вече твърде сложен свят.
Допълнение 1: след редица обсъждания промених значението padding на 1.5rem, за да подобря компромиса между мобилните и десктоп дисплеите.
Допълнение 2: напомниха ми за ch unit (w3.org/TR/css-values-4/#ch), и той ми хареса! След това промених значението на 70ch/2ch, което изглежда почти по същия начин, но е с два байта по-малко; само padding малко намаля, което е добре за мобилните устройства.
100 байта CSS, които на практика навсякъде изглеждат красиво (разширена версия)
Това е един съвсем опростен CSS, който ще изглежда добре на повечето дисплеи:
html {
max-width: 70ch;
padding: 3em 1em;
margin: auto;
line-height: 1.75;
font-size: 1.25em;
}
Нека да се спрем по-подробно:
- max-width: 70ch
така нареченият удобен за четене диапазон обикновено е в границите на 60-80 символа и в CSS това може да бъде зададено директно с помощта на единицата ch - padding: 3em 1em
Ако ширината на дисплея се окаже по-малка от указания по-горе max-width, то този padding предотвратява разтягането на текста при мобилните устройства от край до край. За да оставим празно място отгоре и отдолу, използваме 3em - margin: auto
Това е всичко, което е необходимо за центриране на страницата. Използва се спрямо HTML, понеже в моя сайт не се използва семантичния таг </p>, който навярно присъства в повечето сайтове - line-height: 1.75
Разстоянието между редовете, с което се подобрява визуалната детайлност. Винаги оставяйте височината на реда без да указвате мерни единици – има съществени причини да се постъпва така - font-size: 1.5em
Забелязах, че последно време при тенденциите в дизайна и размерите на екрана водят до увеличаване на шрифтовете. Или може би аз остарявам. Ако искате да разрешите на потребителите да могат да мащабират, изберете em или rem вместо px
Възможно е използването на :root вместо <html>, за да се гарантира наличието на селектор, то тази тънкост е твърде сложна за мен, а и добавя още един символ.
Още 100 незадължителни байтове
h1,h2,h3,h4,h5,h6 {
margin: 3em 0 1em;
}
p,ul,ol {
margin-bottom: 2em;
color: #1d1d1d;
font-family: sans-serif;
}
Това е