fbpx
1.4 C
София

Тези 58 байта CSS изглеждат красиво почти навсякъде

Най-четени

Даниел Десподов
Даниел Десподовhttps://www.kaldata.com/
Новинар. Увличам се от съвременни технологии, информационна безопасност, спорт, наука и изкуствен интелект.

Оригиналът е на 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;
}

Това е


Коментирайте статията в нашите Форуми. За да научите първи най-важното, харесайте страницата ни във Facebook, и ни последвайте в Telegram и Viber или изтеглете приложението на Kaldata.com за Android, iOS и Huawei!

Абонирай се
Извести ме за
guest

0 Коментара
Отзиви
Всички коментари

Нови ревюта

Подобни новини