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-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Всегда храни верность своему начальнику - следующий, может быть еще хуже... |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.