CSS от А до Я: решение распространенных проблем в CSS

CSS от А до Я: решение распространенных проблем в CSS

От автора: в качестве бонуса в этой статье из серии CSS от А до Я я ответил на часто задаваемые вопросы по CSS. Надеюсь, мои советы будут полезными.

Видеоурок и его текстовую версию по свойству quotes можно посмотреть по ссылке.

Q значит вопросы по CSS

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

Как в CSS сделать вертикальное центрирование?

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

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

Возьмем в качестве примера HTML код ниже. Это разметка модального окна .modal внутри контейнера:

<div class="modal"> 
  <h2>Message title</h2> 
  <p>Message text lorem ipsum dolor sit amet</p> 
</div>

Для абсолютного центрирования элемента .modal можно совместить абсолютное позиционирование и свойство translate. Первый этап – это поместить левый верхний угол блока в центр контейнера. Для этого необходимо сдвинуть верхнюю и левую грани на 50% высоты и ширины родительского блока соответственно:

.container {position: relative; width: 100vw; height: 100vh;} 
.modal {position: absolute; top: 50%; left: 50%;}

Второй этап – вернуть элемент в абсолютный центр контейнера. Для этого необходимо сдвинуть блок на половину его ширины и высоты назад.

Если нам известны размеры блока .modal, мы можем все это сделать при помощи отрицательных margin’ов и деления свойств width и height на 2. Однако если модальное окно может менять свой размер (к примеру, размер задан в процентах), такой подход не сработает.

Поэтому можно воспользоваться свойством transform и сдвигать элемент в процентах от его текущего размера.

.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

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree