/* ============================================ RESET.CSS - Полный сброс браузерных стилей Подключить ПЕРВЫМ в перед другими CSS Версия: 2.0 | Автор: Адаптивный дизайн ============================================ */ /* 1. УНИВЕРСАЛЬНЫЙ СБРОС */ /* Убираем все отступы, задаем логичную box-model */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; /* Самый важный rule! */ } /* 2. HTML И BODY */ /* Задаем базовые параметры документа */ html { font-size: 100%; /* 16px по умолчанию, можно менять для rem */ -webkit-text-size-adjust: 100%; /* Предотвращает авто-масштаб в iOS */ -ms-text-size-adjust: 100%; /* Для IE/Edge */ text-size-adjust: 100%; /* Стандарт */ scroll-behavior: smooth; /* Плавный скролл */ } html:focus-within { scroll-behavior: smooth; } body { min-height: 100vh; /* Минимум на весь экран */ min-height: -webkit-fill-available; /* Для мобильных Safari */ text-rendering: optimizeSpeed; /* Оптимизация рендеринга текста */ line-height: 1.5; /* Базовый межстрочный интервал */ -webkit-font-smoothing: antialiased; /* Сглаживание шрифтов в WebKit */ -moz-osx-font-smoothing: grayscale; /* Сглаживание в Firefox */ overflow-x: hidden; /* Убираем горизонтальный скролл */ } /* 3. ТИПОГРАФИКА */ /* Все элементы наследуют шрифты от body */ body, h1, h2, h3, h4, h5, h6, p, span, div, a, button, input, textarea, select { font-family: inherit; /* Наследуем шрифт */ font-size: inherit; /* Наследуем размер */ font-weight: inherit; /* Наследуем жирность */ line-height: inherit; /* Наследуем межстрочный интервал */ color: inherit; /* Наследуем цвет */ } /* Сброс заголовков */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* 4. ССЫЛКИ */ /* Убираем стандартное оформление */ a { text-decoration: none; /* Без подчеркивания */ color: inherit; /* Наследуем цвет */ background-color: transparent; /* Прозрачный фон */ -webkit-text-decoration-skip: objects; /* Для старых iOS */ } a:not([class]) { text-decoration-skip-ink: auto; /* Подчеркивание не залезает на буквы */ } /* 5. СПИСКИ */ /* Убираем маркеры и отступы */ ul, ol { list-style: none; /* Без точек/цифр */ } /* 6. ИЗОБРАЖЕНИЯ И МЕДИА */ /* Делаем responsive по умолчанию */ img, picture, video, canvas, svg { display: block; /* Убираем лишнее пространство снизу */ max-width: 100%; /* Не вылезают за контейнер */ height: auto; /* Сохраняют пропорции */ } /* 7. ФОРМЫ И ИНПУТЫ */ /* Полный сброс нативных стилей */ button, input, textarea, select { font: inherit; /* Наследуем шрифт от body */ color: inherit; /* Наследуем цвет */ background: transparent; /* Прозрачный фон */ border: none; /* Без рамки */ outline: none; /* Без обводки при фокусе */ -webkit-appearance: none; /* Убираем нативные стили iOS/Safari */ -moz-appearance: none; /* Убираем нативные стили Firefox */ appearance: none; /* Стандартное свойство */ border-radius: 0; /* Без скруглений по умолчанию */ } /* Убираем крестик в IE для инпутов */ input::-ms-clear { display: none; } /* Убираем стрелки у number input */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } /* Для textarea - запрет на изменение размера по умолчанию */ textarea { resize: vertical; /* Только вертикальное изменение */ overflow: auto; /* Скролл при переполнении */ } /* 8. КНОПКИ */ /* Особый сброс для кнопок */ button { cursor: pointer; /* Курсор-указатель */ background: transparent; /* Прозрачный фон */ border: none; /* Без рамки */ user-select: none; /* Нельзя выделить текст кнопки */ -webkit-tap-highlight-color: transparent; /* Убираем серый highlight при тапе в iOS */ } button:disabled { cursor: not-allowed; /* Курсор "недоступно" для disabled */ opacity: 0.6; } /* 9. ТАБЛИЦЫ */ /* Убираем spacing и делаем responsive */ table { border-collapse: collapse; /* Сливаем границы */ border-spacing: 0; /* Убираем отступы между ячейками */ width: 100%; /* На всю ширину по умолчанию */ } /* 10. ПРЕДОТВРАЩЕНИЕ БАГОВ */ /* Убираем лишние отступы у inline-элементов */ img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; /* Убирает лишний отступ снизу */ } /* Для fieldset и legend */ fieldset { border: 0; margin: 0; padding: 0; } legend { padding: 0; } /* 11. СКРЫТЫЕ ЭЛЕМЕНТЫ */ /* Правильные способы скрытия */ [hidden] { display: none !important; } /* Для скринридеров */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 12. ОБРАБОТКА ФОКУСА */ /* Для доступности - видимый фокус */ :focus-visible { outline: 2px solid #4d90fe; /* Синяя обводка как в браузерах */ outline-offset: 2px; } /* Для мобильных - убираем outline при touch */ @media (hover: none) and (pointer: coarse) { :focus:not(:focus-visible) { outline: none; } } /* 13. СЕЛЕКТОРЫ ДЛЯ ПЕЧАТИ */ @media print { *, *::before, *::after { background: white !important; color: black !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } pre { white-space: pre-wrap !important; } @page { margin: 2cm; } } /* 14. УБИРАЕМ АНИМАЦИИ ДЛЯ ЛЮДЕЙ С ПРЕДПОЧТЕНИЯМИ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* 15. ДОПОЛНИТЕЛЬНЫЕ СБРОСЫ ДЛЯ СПЕЦИФИЧНЫХ ЭЛЕМЕНТОВ */ /* Убираем стандартный маркер у details */ details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; } /* Убираем стандартный фон у mark */ mark { background-color: transparent; color: inherit; } /* Для progress */ progress { vertical-align: baseline; } /* 16. БАЗОВЫЕ НАСТРОЙКИ ДЛЯ АДАПТИВНОСТИ */ /* Контейнер по умолчанию */ .container { width: 100%; max-width: 1200px; /* Максимальная ширина для десктопов */ margin: 0 auto; /* Центрирование */ padding: 0 15px; /* Отступы по краям */ } /* Утилитарный класс для responsive изображений */ .img-fluid { max-width: 100%; height: auto; } /* Утилитарный класс для скрытия на мобильных */ .mobile-hidden { display: none; } @media (min-width: 750px) { .mobile-hidden { display: block; } } /* 17. ВСПОМОГАТЕЛЬНЫЕ КЛАССЫ */ /* Очистка float */ .clearfix::after { content: ""; display: table; clear: both; } /* Для скрытия контента с сохранением доступности */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* 18. НОРМАЛИЗАЦИЯ НЕКОТОРЫХ ЭЛЕМЕНТОВ */ /* Делаем hr более предсказуемым */ hr { box-sizing: content-box; height: 0; overflow: visible; border: 0; border-top: 1px solid currentColor; margin: 1em 0; } /* Для pre и code */ pre, code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } /* 19. ФИКСЫ ДЛЯ СТАРЫХ БРАУЗЕРОВ */ /* Для IE 10-11 */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* Фиксы для IE */ img { max-width: none; } } /* 20. КОНЕЧНЫЕ ПРАВИЛА */ /* Гарантируем, что у body нет отступов */ body { margin: 0; } /* Убираем стандартный фон у html */ html { background-color: white; } /* ============================================ КОНЕЦ RESET.CSS Теперь можно строить адаптивный дизайн с чистого листа! ============================================ */