Советы по CSS, которые вы, вероятно, не увидите ни в одном учебнике

1656556219 sovety po css kotorye vy veroyatno ne uvidite ni v

Кристиан Трайна

1*5YzOyUp5pIiHVAu8OQhGtg

Существуют правила CSS, которые можно найти в любом учебнике.

И еще есть правила CSS, которые вы не найдете в учебниках, но с которыми вы столкнулись сразу, когда начали кодировать. Я уверен, что вы уже погуглили о том, как выровнять элемент по вертикали и создать этот сложный макет. Мы не будем об этом говорить.

Наконец, есть правила CSS, которые вы не встречали ни в одном учебнике и не могли знать. Со временем я собрал эти советы и теперь решил написать статью, надеясь, что они могут быть полезны для других людей.

Вот чему меня никогда не научили учебники CSS.

Padding-top – относительно ширины родительского элемента

Сколько раз вы использовали относительные единицы в CSS? Я их большой поклонник, потому что они позволяют создать адаптивный сайт, не зацикливая на медиа-запросах. Если вы хотите установить высоту элемента в качестве половины высоты родительского, запишите height: 50% достаточно.

Относительные единицы можно использовать везде. Если вы хотите добавить расстояние между двумя вертикальными элементами, вы можете написать margin-top: 15% и это сделает маржу. Расстояние будет составлять 15% высоты родителей. Я думаю, что вы уже знаете это, и я не хочу тратить ваше время. Но, возможно, вы не знаете, что это не столь тривиально.

В некоторых ситуациях лучше использовать отступление вместо поля. Но когда вы установите padding-top: 15% … какого черта?

Это работает не так, как ожидалось. Это не относительно роста родителей. Что происходит?

Решение

Это относительно ширины отца.

Хотите практическую демонстрацию? Вот:

Просто поиграйте с изменением ширины родителей и посмотрите, как это повлияет на восполнение ребенка.

Сначала это может выглядеть странно, но на самом деле есть веская причина, почему это происходит. Вы можете узнать это, прочитав спецификации CSS…

Нет, я шучу – нет объяснения, почему это происходит. Или, во всяком случае, я его нигде не нашел. Это просто так, имейте это в виду.

Несмотря на то, что мы можем не понять причины, почему инженеры сделали это, мы можем использовать эту функцию с пользой. Если у нас есть элемент, и мы устанавливаем следующее:

.parent {  height: auto;  width: 100px;}
.child {  padding-top: 100%;}

Тогда высота элемента будет такой же, как и высота ребенка, поскольку мы задали height: auto. Кроме того, высота ребенка будет такой же, как и ширина родителей, поскольку мы установили padding-top: 100%. В результате получится квадрат, и элемент будет сохранять то же соотношение при любом размере.

Вот рабочий пример:

Если ты изменишься padding-top: 100% с любым другим процентом вы получите прямоугольник. Кроме того, если вы изменяете ширину, соотношение всегда сохраняется.

Transform может стекать правила

Если вы изучали информатику, вы точно помните ту ужасную черепаху и ее выдвигающуюся ручку. Эта образовательная концепция более известна как графика черепахи, и ее цель – направлять черепаху по пути с помощью простых инструкций, шаг за шагом, таких как 20 шагов вперед и повернуть на 90 градусов.

Что, если бы, используя CSS, вы могли бы сказать, что блок перемещает 20 пикселей вправо по отношению к его текущей позиции, а не к начальной? А что если я скажу, что вы можете сделать это с помощью transform имущество?

Многие разработчики этого не знают transform может накапливать больше одного правила, и n+1это правило будет относительно позиции, достигнутой в nэто правило, а не его исходное положение.

Вы растерялись?

Возможно, эта ручка сможет очистить ваш разум:

Обратите внимание, что мы не использовали никаких переменных JavaScript для сохранения текущей позиции или текущего вращения. Эта информация нигде не хранится! Решение простое, если написать:

transform: translateX(20px);

А затем вы добавляете еще одно правило:

transform: translateX(20px) translateX(40px)

Второе правило не заменит первое, но они будут применяться поочередно последовательно. Важен тот факт, что они используются последовательно. Когда вы вращаете элемент, вы также возвращаете систему отсчета и последующие правила будут относительно новой системы отсчета. Поэтому:

transform: rotateZ(20deg) translateX(30px)

будет отличаться от:

transform: translateX(30px) rotateZ(20deg)

Вы также можете комбинировать разные агрегаты. К примеру, вы можете центрировать большой div размером 600 пикселей следующим образом:

transform: translateX(50vw) translateX(-300px)

Но если вы не собираетесь его анимировать, возможно calc() является лучшей альтернативой.

Если вам интересно о черепахе, я создал другой фрагмент, воспроизводящий динамику:

К сожалению, пока не рисует. Но при желании всегда можно реализовать ручка функция.

Поля и отступы действуют с полудня до полуночи

Это легко, и многие из вас подумают, что это тривиально, но я видел так много людей, которые борются с квадруплами, что перестал воспринимать это как должное.

Многие разработчики не знают, что почти каждое свойство CSS имеет сокращенную альтернативу. Остальные разработчики это знают, но они продолжают использовать определенные свойства, поскольку никогда не помнят порядок.

Позвольте дать вам совет:

Поля и границы идут с полудня до полуночи.

Я могу объяснить это лучше. Вы точно можете использовать:

padding-top: 3px;padding-left: 6px;padding-right: 6px;padding-bottom: 3px;

Но вы также можете использовать краткий и альтернативный вариант:

padding: 3px 6px 3px 6px;

Правило запоминать порядок простое – просто посмотрите на эти часы:

1*zxqYpjLODfi3RKIZ3tMxWg

Начинайте с 12 часов и продолжайте по часовой стрелке. Вы получите верный порядок.

Если вместо этого используется только два значения:

padding: 2px 4px;

Двигатель браузера расширит его, повторив пару:

padding: 2px 4px 2px 4px;

И, наконец, если вы используете три значения:

padding: 2px 4px 6px;

Механизм браузера будет использовать среднее значение как для левого, так и для правого, как если бы вы писали:

padding: 2px 4px 6px 4px;

Фон поддерживает несколько изображений

Это одно из наименее известных свойств, хотя оно широко поддерживается.

Вы знаете, что вы можете указать URL изображения внутри background свойство, но если оно вам когда-нибудь понадобится, вы можете вставить сколько угодно изображений. Что вам нужно сделать, это отделить их запятой:

background: url('first-image.jpeg') top left,            url('second-image.jpeg') bottom right;

Почему это может быть полезно? Что вы думаете о Линусе Торвальдсе накануне восхода солнца, созданного CSS?

Вы также можете квадратировать прямоугольное изображение, добавив тененые границы, которые очень известны в Instagram. Чтобы достичь этого, мне нужно было дважды повторить одно и то же изображение и увеличить фоновое изображение в 5 раз:

Обнаружение сенсорных устройств

Благодаря медиа-запросам мы можем сделать наши веб-сайты адаптивными и позволить макету адаптироваться ко многим размерам экрана. Но этого мало!

Смартфоны, планшеты и классические персональные компьютеры отличаются по своей природе. Независимо от размера экрана.

На устройстве с сенсорным экраном вы закрепляете, проводите пальцем и сводите щипки, а такие инструменты как HammerJS помогают вам. С помощью мыши вы только щелкаете, но с большей точностью. Если вы сделали свой веб-сайт адаптированным к различным размерам экрана, возможно, вы могли бы рассмотреть его адаптацию в других направлениях и поддерживать различные типы ввода!

Вам не нужен сложный JavaScript код, чтобы обнаружить пользовательский агент. Все, что вам нужно, это CSS:

@media (any-pointer: fine) {  /*    These rules will be applied to not-touchscreen devices  */}
@media (any-pointer: coarse) {  /*    These rules will be applied to touchscreen devices only  */}

Вот пример:

Совет профессионала: Вам не нужен смартфон, чтобы проверить правило, вы можете смоделировать устройство с сенсорным экраном в инструментах разработчика Google Chrome, просто нажав этот значок:

1*_GCh44P5LmsiXNq1UEx2VQ

Я считаю это очень полезным, и я не знаю почему он не распространился, хотя он прилично поддерживается. Например, я использовал его в карусели, чтобы скрыться шевроны значки на устройствах с сенсорным экраном для обеспечения более оригинального опыта.

И, наконец, вы также можете предоставить файл touchscreen.css и импортируйте его условно:

@import url('touchscreen.css') screen and (any-pointer: coarse);

Примечание: это не поддерживается Firefox, как вы можете увидеть на caniuse.com

Поля любят сворачиваться

0*9Y4R8_iMsLJNkFX4

И следите за лестницей. Они любят меняться.

Перси Уизли — Гарри Поттер.

Мне нравится CSS: это понятный, обычный и элегантный язык – все, что может попросить разработчик.

Вы применяете правило и оно работает. Но когда я подумал, что знаю CSS, случилось следующее:

Что за чертовщина здесь происходит? Вы, вероятно, ожидаете, что текст будет иметь поле внутри заголовок, но вместо этого он пытается потянуть заголовок вниз. Это не то, что я желал.

Позже я обнаружил, что поля любят сворачиваться.

Что это значит? Предположим, мы хотим создать такой вложенный макет:

1*Ga5LtmwuzDy1ywToOBWg5g

Итак, мы создали разметку для трех элементов и установили для каждого из них разную высоту и разное поле. Это должно работать, верно? Неверно.

Если вы это сделаете, ваш браузер заметит три соседних блока полей, и он захочет объединить их в один, уникальный, большой блок полей.

Поэтому результат будет выглядеть так:

1*pyuE0l73A-G5RRS1iUP6rQ

Почему это происходит? Не знаю. Это историческая особенность CSS. Я предполагаю, что когда CSS сначала был стандартизирован, поля не были большой проблемой, а макеты не были такими сложными, как сейчас. Так что инженеры могли подумать, что это полезная функция. Теперь это вообще не имеет смысла.

Если вы годами разрабатывали CSS и никогда не сталкивались с этой проблемой, причина в том, что поля сворачиваются только тогда, когда:

  • поля вертикальные (это не происходит для горизонтальных полей)
  • внешние элементы не содержат текста или другого содержимого
  • заполнение или границы не установлены
  • дисплей «заблокирован»
  • переполнение отличается от «начального»
  • маржа не отрицательная

И список продолжается. Если вы столкнетесь с этой проблемой, вы можете просто отменить одно из этих условий (кроме первого), и поля будут приручены. Вы также можете избегать использования margin-topи используйте top и padding-top вместо этого.

Обратите внимание, что это может произойти также для побратимов. Если у вас есть два брата и сестры друг на друге, и вы устанавливаете margin-bottom: 30px к первому и margin-top: 60px ко второму, малейший разрушится. Поле результата не будет 30+60=90 точек, но будет max(30, 60) = 60 точек.

Последние мнения

Это все! Надеюсь, я не тратил ваше время на эту статью, и что вы узнали что-то ценное.

Если вам понравилась публикация, вы можете нажать кнопку «Аплодисменты», которая появится слева. Вы можете дать мне до 50 плесканий 😀

Если у вас есть вопросы, проблемы или вы просто хотите рассказать мне, чему вы не научило учебное пособие, просто оставьте комментарий в разделе ниже, и ваша забота будет оценена!

— Кристиан Винченцо Трайна

Добавить комментарий

Ваш адрес email не будет опубликован.