Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
Вы можете просмотреть полную транскрипцию и скринкаст для соответствующего видео о букве Q, свойстве quotes , здесь .
В качестве бонуса к содержанию этой статьи в рамках нашей серии CSS AtoZ я ответил на самые распространенные вопросы о CSS, которые, я надеюсь, будет полезен.
Q для вопросов о CSS
По теме кавычек CSS буквально нечего сказать, и нет другого селектора, свойства или значения, начинающегося с Q. Итак, в советах на этой неделе я отвечаю на некоторые распространенные вопросы, которые я получаю от своих учеников, сторонников AtoZ и коллеги профессионалы.
Как вы центрируете вещи по вертикали в CSS?
Я получаю это много. И я получил этот в дополнение к более общему вопросу о том, как горизонтально центрировать вещи в CSS, который я рассмотрел в предыдущем совете о плаваниях .
На тему вертикального центрирования некоторые люди скажут вам, что это действительно сложно. Но в наши дни это не требует большого количества CSS и может быть сделано для любого элемента — даже в адаптивном проекте, когда вы не знаете, насколько широк или высок контейнер или элемент, который нужно центрировать.
Возьмем следующий HTML- .modal простое .modal сообщения .modal внутри контейнера:
<div class="modal"> <h2>Message title</h2> <p>Message text lorem ipsum dolor sit amet</p> </div>
Для абсолютного .modal элемента .modal мы можем комбинировать абсолютное позиционирование с translate.
Шаг первый — поместить верхний левый угол прямоугольника прямо в центр родительского контейнера — что мы можем сделать, сместив его верхний и левый края на 50% height и 50% width родительского контейнера:
.container {position: relative; width: 100vw; height: 100vh;} .modal {position: absolute; top: 50%; left: 50%;}
Шаг второй — вернуть элемент обратно в абсолютный центр контейнера. Нам нужно переместить его обратно на половину его width и на половину его height .
Если мы знаем размеры .modal мы можем достичь этого с некоторым отрицательным margin и разделить width или height на 2, чтобы получить требуемое значение. Но если .modal может изменить размер (например, из-за размера в процентах), это не сработает.
Вместо этого, используя преобразование перевода, мы можем переместить элемент в процентах от его существующего размера.
.modal {position: absolute; top: 50%; left: 50%;} /* back by half its width, up by half its height */ transform: translate(-50%, -50%);
И у вас это есть, элемент идеально центрируется даже с переменным размером.
Как вы справляетесь с префиксами вендоров в CSS?
Возможно, вы заметили в первом совете о вертикальном центрировании, что я использовал преобразование без добавления префиксов поставщика. Это по двум причинам. Во-первых, он облегчает чтение и ввод учебного кода, а во-вторых, для одного маленького секрета: я больше не пишу префиксы вендоров.
Я все еще время от времени оказываюсь на отличном сайте caniuse.com, чтобы проверить поддержку браузером различных свойств и функций, но в настоящее время я не пишу префиксы в своем коде.
Это не потому, что мне плевать на пользователей браузеров, кроме того, в котором я разрабатываю. И не потому, что я ленивый и плохой разработчик. Я не пишу префиксы вендоров, потому что у меня есть автоматизированное задание, которое добавляет их для меня, поэтому мне никогда не придется думать о них снова.
Я настоятельно рекомендую использовать препроцессор для написания вашего CSS (я использую Sass, но также использовал все остальные, чтобы попробовать их), и я бы рекомендовал добавить Autoprefixer в ваш процесс. Autoprefixer — это плагин для PostCSS, который автоматически добавляет необходимые префиксы в ваш скомпилированный CSS на основе данных caniuse.com .
Есть плагины, доступные для всех популярных автоматизаторов задач, и я не могу рекомендовать это достаточно высоко!
Мой CSS не работает. Вы можете помочь?
Краткий ответ, наверное. Но всегда очень сложно отлаживать чей-то код удаленно или на основе описания проблемы. Вместо этого позвольте мне описать процесс отладки вонячего CSS:
- Проверьте, что соответствующие файлы сохранены
- Проверьте подсветку синтаксиса в вашем редакторе и найдите любые несоответствия
- Проверьте пропущенные кавычки, скобки или точки с запятой
- Убедитесь, что файлы, которые я редактирую, — это то, что я смотрю в браузере
- Убедитесь, что все пути правильны (для файлов CSS, изображений или чего-либо еще). Вы можете проверить, правильно ли загружены все ваши внешние файлы на вкладках «Сеть», «Источники» или «Консоль» в инструментах разработчика.
- Осмотрите элемент и убедитесь, что все имена классов написаны правильно
- Проверьте элемент и убедитесь, что все свойства CSS написаны правильно (в Chrome все недопустимые свойства или значения будут помечены оранжевым значком предупреждения в представлении элементов)
- Проверьте элемент и поиграйте со значениями, чтобы увидеть, какие изменения
- Вполне вероятно, что вы уже уловили проблему, но если нет, требуется более глубокое копание
Это может быть хорошим моментом, чтобы обратиться за помощью онлайн или лично. Если вы попросите людей о помощи, убедитесь, что вы можете отправить им ссылку на Codepen или JSFiddle вашей проблемы, чтобы они могли видеть, с чем вы боретесь.
Ворчание или глоток?
Мне потребовалось некоторое время, чтобы попасть на борт Гранта, но в конце концов я это сделал. Начнем с того, что я не совсем понял, для чего он нужен, но когда я понял, что могу использовать его для запуска локального сервера, компиляции Sass, сжатия моего JavaScript и предупреждения о любых синтаксических ошибках во время ввода, я был убежден. Мне потребовалось некоторое время, чтобы привыкнуть, но я был счастлив.
Когда я услышал о Gulp (это инструмент, который делает в основном то же самое, но по-другому), я занял позицию «если он не сломан, не чините его».
Но я был неправ.
Недавно я работал над клиентским проектом в составе команды, и они уже использовали Gulp, поэтому я тоже использовал его, и это да, это быстро! С Grunt компиляция Sass занимала много секунд, но с Gulp мы говорим миллисекунды.
Я полностью сконвертирован, и пока что-то лучше не придет, я буду придерживаться Gulp.
Надеюсь, вы нашли эти вопросы и ответы интересными или полезными. Если у вас есть дополнительные вопросы, пожалуйста, свяжитесь с нами и дайте мне знать, как я могу вам помочь.