От создателя: сейчас я собираюсь познакомить вас с некими инструментами CSS, о которых вы, может быть, не знали ранее. Эти инструменты представляют собой единицы измерения, к примеру, пиксели либо em, но полностью может быть, что о неких вы никогда не слышали! Давайте начнем.
Работая с способами CSS, которые мы отлично знаем, можно застрять, когда возникают новейшие задачи. Так как Интернет продолжает развиваться, спрос на новейшие решения также будет расти. Потому мы, как веб-дизайнеры и front-end создатели, не имеем другого выбора, не считая как учить новейшие приемы. Это значит, что вы должны знать даже особые инструменты — те, которые употребляются не так нередко, но когда они необходимы, они необходимы.
rem
Начнем с того, что похоже на то, с чем вы, возможно, уже знакомы. Единица измерения em определяется как текущее значение font-size. Так, к примеру, если вы установите размер шрифта для элемента body, значение em хоть какого дочернего элемента в body будет равно этому размеру шрифта.
Test
| 123 | Test |
CSS body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}
| 123456 | body { font-size: 14px;}div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px} |
Тут мы указали, что у div будет font-size 1.2em. Это в 1,2 раза больше, чем размер шрифта, который он унаследовал, в этом случае 14px. Итог -16.8px.
Тем не наименее, что происходит, когда вы каскадом определяете размеры шрифтов друг в друге? В последующем фрагменте мы применяем буквально таковой же CSS, как и выше. Любой div наследует размер шрифта от собственного родителя, давая равномерно увеличивающиеся размеры шрифта.
Test Test Test
Директивы robots.txt не предназначены для деиндексации страниц сайта
| 1234567891011 | Test Test Test |
Хотя в неких вариантах это быть может лучше, нередко для вас может потребоваться просто полагаться на одну единицу для сравнения. В этом случае вы должны применять rem. «r» в rem значит «root»; это равно размеру шрифта, установленному для корневого элемента; почти всегда это элемент html.
CSS html { font-size: 14px; } div { font-size: 1.2rem;
}
| 123456 | html { font-size: 14px;}div { font-size: 1.2rem;} |
Во всех 3-х вложенных элементах div в прошлом примере шрифт оценивается как 16.8px.
Отлично для сетки
Rem полезны не лишь для определения размера шрифта. К примеру, вы сможете применять глобальную сеточную систему либо библиотеку стилей пользовательского интерфейса на базе размера шрифта корневого элемента HTML rem, а в определенных местах применять масштабирование em. Это даст для вас наиболее прогнозируемый размер шрифта и масштабирование.
CSS .container { width: 70rem; // 70 * 14px = 980px
}
| 123 | .container { width: 70rem; // 70 * 14px = 980px} |
Философски, мысль, лежащая в базе таковой стратегии, состоит в том, чтоб дозволить интерфейсу масштабироваться в согласовании с размером контента. Тем не наименее, это не непременно имеет смысл в любом определенном случае.
Могу ли я применять это?
VH и VW
Адаптивные способы веб-дизайна очень зависят от процентных правил. Но процент в CSS не постоянно является наилучшим решением для каждой задачи. Ширина в CSS соотносится с содержащим родительским элементом. Что если вы желаете применять ширину либо высоту области просмотра заместо ширины родительского элемента? Это конкретно то, что обеспечивают единицы vh и vw.
Единица vh равна 1/100 высоты окна просмотра. К примеру, если высота окна браузера 900px, 1vh будет рассчитываться, как 9px. Буквально так же, если ширина области просмотра 750px, 1vw оценивается как 7.5px.
Есть, чудилось бы, нескончаемые способности для использования этих правил. К примеру, весьма обычной метод создать слайды полной либо практически полной высоты быть может достигнут при помощи одной строчки CSS:
Парсинг URL-адреса в JavaScript: имя хоста, путь, запрос, хеш
CSS .slide { height: 100vh;
}
| 123 | .slide { height: 100vh;} |
Представьте, что для вас нужен заголовок, который будет заполнять всю ширину экрана. Для этого для вас необходимо установить размер шрифта в vw. Этот размер будет масштабироваться зависимо от ширины окна браузера.
Могу ли я применять это?
Vmin и Vmax
В то время, как vh и vm постоянно относятся к высоте и ширине области просмотра, соответственно, vmin и vmax относятся к наибольшему либо минимальному из этих значений ширины и высоты, зависимо от того, что меньше либо что больше. К примеру, если для браузера задана ширина 1100 пикселей и высота 700 пикселей, 1vmin будет 7 пикселей, а 1vmax — 11 пикселей. Но, если ширина была установлена в 800px, а высота в 1080px, vmin будет 8px, а vmax — 10.8px.
Итак, когда вы могли бы применять эти значения? Представьте, что для вас нужен элемент, который постоянно вполне виден на дисплее. Внедрение высоты и ширины со значением vmin ниже 100 дозволит это создать. К примеру, квадратный элемент, который постоянно касается как минимум 2-ух сторон экрана, быть может определен так:
CSS .box { height: 100vmin; width: 100vmin;
}
| 1234 | .box { height: 100vmin; width: 100vmin;} |
Если для вас нужна квадратная рамка, которая постоянно закрывает видимое окно просмотра (всегда касаясь всех 4 сторон экрана), используйте те же правила, лишь с vmax.
CSS .box { height: 100vmax; width: 100vmax;
}
| 1234 | .box { height: 100vmax; width: 100vmax;} |
Композиции этих правил обеспечивают весьма гибкий метод использования размера окна просмотра.
Могу ли я применять это?
ex и ch
Единицы ex и ch, аналогично em и rem, зависят от текущего шрифта и размера шрифта. Но, в отличие от em и rem, эти единицы также полагаются на font-family, потому что они определяются на базе мер шрифта.
Фиксированные заголовки и ссылки перехода? Решение в scroll-margin-top
Единица ch либо единица знака определяются, как «продвинутая мера» ширины нулевого знака, 0. Весьма увлекательное обсуждение того, что это значит, можно отыскать в блоге Эрика Мейерса, но основная теория состоит в том, что, беря во внимание моноширинный шрифт, блок с шириной N знаков, к примеру width: 40ch;, постоянно может содержать строчку с 40 знаками в этом определенном шрифте. Хотя обыденное внедрение этого правила относится к разметке Брайля, способности для творчества тут, непременно, выходят за рамки схожих обычных приложений.
Единица ex определяется как «х-высота текущего шрифта ИЛИ половины 1-го em». Значением x-высоты данного шрифта является высота строчной буковкы x этого шрифта. Нередко это приблизительно середина знаков шрифта.
Х-высота; высота строчной буковкы x
Существует огромное количество вариантов использования этого инструмента, большая часть из которых предусмотрены для типографской микро-корректировки. К примеру, элемент sup, обозначающий верхний индекс, быть может перемещен ввысь в строке, используя относительное положение и нижнее значение 1ex. Буквально так же вы сможете сдвинуть элемент индекса вниз. В браузере по дефлоту для их употребляются правила vertical-align, относящиеся к верхним и нижним индексам, но если для вас нужен наиболее четкий контроль, вы сможете обрабатывать текст наиболее очевидно, к примеру:
CSS sup { position: relative; bottom: 1ex; } sub { position: relative; bottom: -1ex;
}
| 12345678 | sup { position: relative; bottom: 1ex;}sub { position: relative; bottom: -1ex;} |
Могу ли я применять это? Единица ex существует с CSS1, хотя таковой же жесткой поддержки для ch вы не отыщите. Для получения доборной инфы о поддержке, ознакомьтесь с Единицы измерения и значения CSS на quirksmode.org.
Заключение
Смотреть за неизменным развитием и расширением CSS весьма принципиально, чтоб у вас были все инструменты в вашем наборе. Может быть, вы столкнетесь с определенной неувязкой, которая просит нежданного решения с внедрением одной из этих единиц измерения.
Создатель: Jonathan Cutrell
Редакция: Команда webformyself.