Переопределение CSS со второй таблицей стилей - PullRequest
7 голосов
/ 08 сентября 2010

Я работаю над довольно большим сайтом, на котором уже есть большая таблица стилей. Мы работаем с этой крупной корпорацией с ограниченными возможностями для внесения изменений (без полного доступа).

Мы будем применять некоторые новые стили для определенного раздела на веб-сайте, и нам дали зеленый свет для включения второй таблицы стилей переопределения (в дополнение к глобальной) при необходимости.

Мой вопрос такой. Существуют ли какие-либо проблемы несовместимости браузера, о которых нам необходимо знать при использовании этого метода? Из-за популярности этого веб-сайта и количества просмотров, которые они получают ежедневно, мы должны быть максимально совместимыми, и я просто хочу убедиться, что наши CSS-переопределения для разделов, с которыми мы работаем, работают без устройство.

Я слышал о некоторых слухах, что IE может неправильно обрабатывать переопределения. Вот пример характера типов переопределений стилей, которые мы будем делать ...

если у меня есть тело {цвет: синий; } и body {font-weight: bold; } во втором CSS-файле мы получим синий и жирный текст, верно?

Ответы [ 5 ]

10 голосов
/ 09 сентября 2010

То, что вы описываете своим CSS, - это наследование, и, по сути, оно «сложит» ваши определения CSS, так как вы сделали пример body {color: blue}, body {font-weight: bold;} в итоге вы получите оба значения для тела через наследование (не переопределяя!)

Чтобы противостоять наследованию, вам придется обнулить или исключить определение первичных листов CSS.

если у вас есть пример:

body { padding: 5px; color: red }

и вы хотите, чтобы на вашем втором листе было поле размером 3 пикселя с синим цветом шрифта, вы бы сделали следующее, чтобы противостоять наследованию

body {padding: 0px; margin: 3px; color: blue }

Тотаким образом, вы бы обнулили отступ (до 0, если хотите, эффективно отмените его).Цвет будет перезаписан, а поля будет новым добавленным значением.

Я бы предложил (если вы уже этого не сделали) использовать Firefox с включенной firebug (двойные экраны здесь очень помогают, но не нужны).Firebug покажет вам, какие строки отменены из-за наследования и по сути перезаписаны.

Вы также можете использовать свои собственные классы и удвоить (или более) определение класса следующим образом:

.red { color: red; }
.center { text-align: center; }
.w500px { width: 500px; }

<div class="red center w500px">This text is red and centered</div>

Таким образом, вы просто объединяете значения в одно.Может дать вам еще одну идею о том, как действовать по-другому.

Надеюсь, это поможет.

3 голосов
/ 08 сентября 2010

Если есть применяемые стили, вы можете использовать

body {
    color: #000 !important;
}

! Важный переопределяет стиль. К сожалению, IE не поддерживает это, хотя.

0 голосов
/ 07 января 2014

Если у кого-то еще есть эта проблема, вот решение, которое я нашел полезным.

Скажем, у меня есть класс в моем оригинальном файле style.css, например:

.menu-bar { width: 100%; }

Я могу переопределить следующее в моей таблице стилей IE, ссылаясь на тело, а затем на имя класса следующим образом:

body .menu-bar { width: 90%; }

Попробуйте захватить родительский div и сослаться на него в таблице стилей т.е.Ознакомьтесь с приведенным ниже примером

<div class="parent">
 <div class="children">
  <div class="grandchildren">
  </div><!-- end grandchildren -->
 </div><!-- end children -->
</div><!-- end parent -->

Вы можете ссылаться на родительский или дедушкин класс, как в таблице стилей IE

body .parent { css properties here }
body .parent .children { css properties here }
body .parent .children .grandchildren { css properties here }
0 голосов
/ 08 сентября 2010

Я не думаю, что есть какие-либо несовместимости.Просто убедитесь, что специфичность ваших переопределений больше, чем у «оригинала», или если они имеют ту же специфичность, переопределение объявляется после «оригинала».

Подробнее о специфичности: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

0 голосов
/ 08 сентября 2010

Нет никаких проблем с несовместимостью браузера, о которых я знаю.Просто убедитесь, что вы тестируете во всех браузерах, которые вас интересуют на каждом этапе, и все будет в порядке.

Ваш пример «жирного синего» верен.Это должно работать таким образом.

Вы должны уделить минутку и прочитать о специфичности и наследовании CSS.Эти ссылки объяснят, как CSS-значения «объединяются» между несколькими правилами в одном селекторе.

...