8 ловушек CSS и методы их обхода
Когда пишется код CSS, очень легко попасть в одну из ловушек. Чтобы их преодолеть, нужно использовать небольшие и эффективные трюки.
В данном уроке описывается несколько моментов, которые помогут при работе над CSS частью вашего проекта.
1. Задаем стили для кнопок
Начнем с классических кнопок HTML. Когда создаются кнопки, например, input type"submit"
или button
, и хочется получить точность до пикселя, нужно вспомнить о следующих командах:
/* Удаляем избыточный отступ в сторону для IE */ .button{ overflow: visible; } /* Удаляем избыточный отступ внутрь для Firefox */ .button::-moz-focus-inner{ border: 0; padding: 0; }
2. Используем псевдо-элементы
Несомненно, что вам уже известны псевдо-элементы, такие как :before
и :after,
которые помогают определять содержание, вставляемое перед (или после) основного элемента. Однако, элементы input
и img
не имеют содержания и псевдо-элементы не работают с ними. А элемент hr
позволяет использовать псевдо-элементы.
Также нужно помнить о разнице между :before
и ::before
. IE8 допускает использование только одинарного двоеточия.
3. Фоновый градиент для всего раздела body
Если вы пробовали использовать CSS3 градиент для тега body
, то наверняка заметили, что он не растягивается, а повторяется. Чтобы исправить положение используйте следующий код:
html { height: 100%; } body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; }
4. Отсутствие переходов для градиентов
К сожалению, ни один из браузеров не поддерживает переходы градиентов (пока).
Но можно использовать следующие трюки:
1. Использовать свойство background-position
для :hover
, чтобы создать иллюзию перехода градиента. В действительности используется сдвиг по оси Y.
a{ background: linear-gradient(orange, red) repeat-x; display: inline-block; padding: 20px; } a:hover{ background-color: red; background-position: 0 -15px; transition: background-position .1s linear; }
2. Трансформация background-color
и использование изображения градиента, которое будет иметь изменяющуюся прозрачность. Такая техника создаст иллюзию перехода градиента.
a{ background-color: orangered; background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); transition: background-color .1s linear; display: inline-block; padding: 20px; } a:hover{ background-color: red; }
5. Зазор между элементами inline-block
Допустим, вы используете inline-block
вместо float
для горизонтального списка. При этом появляется зазор между вашими элементами inline-block
. чтобы исключить его необходимо использовать "грязную" разметку.
То есть, вместо четкой структуры:
<ul> <li>один</li> <li>два</li> <li>три</li> </ul>
Нужно писать так:
<ul> <li>один</li><li>два</li><li>три</li> </ul>
6. Когда height: 100% действительно работает?
Все достаточно просто: когда вы используете height: 100%
для элемента, всегда думайте о высоте его родителя. Если высота родителя не определяется в стилях, то внутренний элемент будет иметь 100% высоты от ничего.
Вот такой широко распространенный пример разметки:
<div id="parent"> <div id="child">2</div> </div>
Стили для него:
#parent{ height: 400px; padding:10px; background:red; } #child{ height: 100%; background:green; }
Зеленый цвет элемента #child
с помощью правила height: 100%
будет растянут на все 400px
по вертикали.
7. Скругленные углы для таблиц
Трюк заключается в установке свойства таблицы border-spacing
в значение 0
. Свойство border-collapse
по умолчанию имеет значение separate
, поэтому нужно установить его в значение collapse
для IE7 и старше (для обратной совместимости кода).
table { *border-collapse: collapse; /* IE7 и старше */ border-spacing: 0; border-radius: 5px; }
8. Модель элемента ввода
Когда разрабатывается элемент поиска, например, то после установки одинаковых значений для свойств height
или width
элементов input type="submit"
и input type="text"
результат обычно расстраивает.
Причина расстройств заключается в том, что для элемента input type="submit"
используется модель определения размеров border-box
, а для элемента input type="text"
- модель content-box
(в IE и FF).
Чтобы устранить причину расстройств, нужно использовать одинаковые модели для элементов ввода. Для этого используется свойство CSS3 box-sizing
:
box-sizing: content-box | padding-box | border-box;
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/LLRAyjTR8oQ/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
«Web делает доступным все, для всех, везде и всегда. Если знания - это сила, то сила сейчас находится практически везде». К. Нордстрем, Й. Ридерстрале |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.