CSS дублирование собственности вопрос

Question

Доброго день,

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

#data-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    padding-bottom: 26px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

и она отлично работает в IE и Firefox, но не Chrome. (Мне не нужно беспокоиться о Safari).

я узнал, что я могу использовать: @media только экран, чтобы исправить его, чтобы он работает на Chrome (и Safari), так что у меня есть другая запись, как:

@media only screen and (-webkit-min-device-pixel-ratio: 0) { 
    #data-container { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     padding-bottom: 14px; 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box;   
    } 
} 

Теперь он работает на Chrome и так это так хорошо. Я обеспокоен тем, что единственным атрибутом, который меня интересует, является padding-bottom, и мне не кажется, что я должен использовать все остальные свойства для # data-container под экраном только для @media, который по существу имеет те же значения как прежде.

Есть ли способ устранить повторяющиеся записи (например, положение, верх, низ и т. Д.) кроме padding-bottom внизу @media только экран?

ТИА,

Coson

Answer 1

Да, CSS является каскадирование (отсюда и C). Просто поместите правила, которые вы хотите переопределить в запросе СМИ:

#data-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    padding-bottom: 26px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

@media only screen and (-webkit-min-device-pixel-ratio: 0) { 
    #data-container { 
     padding-bottom: 14px; 

    } 
} 

jsFiddle Demo

Если вы проверяете элемент с помощью инструментов разработчика, вы увидите, что #data-container наследует стили CSS правила, но padding-bottom перезаписывается, поскольку применяется медиа-запрос. Вот сгенерированные стили из Chrome, например:

@media only screen and (-webkit-min-device-pixel-ratio: 0) 
#data-container { 
    padding-bottom: 14px; 
} 
#data-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    padding-bottom: 26px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}