Метка: css

Что такое брейкпоинты для медиа-запросов в CSS?

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

Популярные брейкпоинты

Это стандартные размеры экранов, которые чаще всего используют веб-разработчики. Их можно модифицировать под свой проект:

/* Очень маленькие устройства (вертикальные смартфоны, меньше 576px) */
@media (max-width: 575.98px) {
  /* Стили для очень маленьких экранов */
}

/* Маленькие устройства (горизонтальные смартфоны, от 576px и выше) */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* Стили для маленьких экранов */
}

/* Средние устройства (планшеты, от 768px и выше) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Стили для планшетов */
}

/* Большие устройства (десктопы, от 992px и выше) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Стили для больших экранов */
}

/* Очень большие устройства (широкие мониторы, от 1200px и выше) */
@media (min-width: 1200px) {
  /* Стили для очень больших экранов */
}

Кастомные брейкпоинты

Если проект требует более точных настроек, например, под какие-то специфичные устройства, вот пример кастомного брейкпоинта:

/* Для маленьких экранов шириной до 400px */
@media (max-width: 400px) {
  /* Стили для супер-компактных экранов */
}

Медиа-запросы по ориентации экрана

Иногда важно знать, держит пользователь устройство вертикально или горизонтально:

/* Вертикальная ориентация экрана */
@media (orientation: portrait) {
  /* Стили для портретного режима */
}

/* Горизонтальная ориентация экрана */
@media (orientation: landscape) {
  /* Стили для альбомного режима */
}

Медиа-запросы по соотношению сторон

Если проект требует дизайна, завязанного на пропорции экрана:

@media (aspect-ratio: 16/9) {
  /* Стили для экранов с соотношением 16:9 */
}

Лайфхаки для использования брейкпоинтов

  1. Mobile-First подход: Пиши стили сначала для маленьких экранов, а потом используй min-width для более крупных.
  2. Относительные единицы: Вместо пикселей используй em или rem — так дизайн будет адаптироваться под настройки пользователя.
  3. Тестируй на реальных устройствах: Разработчики девтулзы — топ, но ничего не заменит тестов на настоящих девайсах.

Что такое CSS-препроцессоры: Sass, Less, Stylus

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

Некоторые из наиболее популярных препроцессоров CSS включают:

  1. Sass (Syntactically Awesome Stylesheets): Sass предоставляет мощные инструменты, такие как переменные, вложенные правила, миксины, наследование и многое другое. Он имеет два синтаксиса: SCSS (Sassy CSS), который похож на обычный CSS с дополнительными возможностями препроцессора, и более компактный синтаксис, называемый Sass.
  2. Less: Less также расширяет стандартный CSS с похожими функциональными возможностями, такими как переменные, миксины, вложенные правила и другие. Синтаксис Less более похож на обычный CSS, чем синтаксис Sass.
  3. Stylus: Stylus — это еще один препроцессор CSS, который предлагает удобный и гибкий синтаксис. Он поддерживает множество функций, включая переменные, вложенные правила и многое другое.

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

Что такое CSS и где его используют

CSS (Cascading Style Sheets) — это язык разметки, который используется для стилизации веб-страниц. Он определяет внешний вид и форматирование элементов HTML документа, таких как цвета, шрифты, размеры, отступы и расположение.

Зачем нужен CSS:

  1. Улучшение внешнего вида: CSS позволяет задавать стили для элементов веб-страницы, делая ее более привлекательной и профессиональной.
  2. Разделение содержимого и представления: CSS позволяет отделить структуру и содержание HTML от его визуального представления, что упрощает обслуживание и обновление веб-страниц.
  3. Повторное использование стилей: CSS позволяет определить стили один раз и применять их к разным элементам или даже к разным страницам, что сокращает объем кода и упрощает его поддержку.
  4. Управление масштабируемостью: CSS позволяет легко изменять внешний вид веб-страницы для различных устройств и экранов, что делает сайт более масштабируемым и удобным для просмотра на различных устройствах (например, на компьютере, планшете или мобильном телефоне).
  5. Повышение доступности: Правильное использование CSS может улучшить доступность веб-страниц для пользователей с ограниченными возможностями, так как различные стили могут быть адаптированы для различных потребностей пользователей.

Таким образом, CSS играет важную роль в создании красивых, удобных и функциональных веб-страниц.

Как убрать браузерную обводку кнопок и ссылок в браузерах Chrome и Safari

У кнопок из Bootstrap — при клике на кнопку появляется браузерная обводка (обводка — в Chrome ; и пунктирная обводка — в Firefox )

* Аналогичная ситуация (если хотим эту браузерную обводку убрать) в случае с ссылками и инпутами решается с помощью css-стиля:

a:active, a:focus { outline: none; }

input, textarea {
outline:none;
}
input:active, textarea:active {
outline:none;
}
:focus {
outline:none;
}
textarea {
resize:none;
}
textarea {
resize:vertical;
}
textarea {
resize:horizontal;
}
button:active, button:focus {
outline: none;
}
button::-moz-focus-inner {
border: 0;
}

Данный код будет работать и для ссылок и для кнопок.