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