css - Is it legal to position an at-rule inside a style block? -
the following valid css:
@media print { .no_print { display: none; } } h1 { font-family: verdana, arial, sans-serif; font-size: 13px; font-weight: bold; margin-bottom: 12px; }
in following have placed @media
statement inside h1
style block. valid css? googling, find examples of @media
statements being placed inside 1 another. lack sufficient familiarity terminology of css refine search terms further in hope of answering question.
h1 { font-family: verdana, arial, sans-serif; font-size: 13px; font-weight: bold; margin-bottom: 12px; @media print { font-weight: normal; } }
no, not valid. generally, at-rules (rules begins @
) allowed @ start of style sheet only, general css principles. however, @media
, @page
rules allowed elsewhere, too, between rules, not inside rule. rule construct consists of list of selectors , set of declarations between braces, e.g. h1 { color: blue; line-height: 1 }
. browsers required ignore misplaced at-rule (and do).
you put @media
rule @ start, restrict effect h1
elements need specify in selector. due css cascade rules (which ignore media restrictiong in calculating specificity), need make selector more specific mere h1
(otherwise latter declaration wins); simple way use contextual selector body h1
, not restrict meaning of selector, gives highet specificity:
@media print { body h1 { font-weight: normal; } } h1 { font-family: verdana, arial, sans-serif; font-size: 13px; font-weight: bold; margin-bottom: 12px; }
if don’t put at-rules @ start, can make @media
rule simpler:
h1 { font-family: verdana, arial, sans-serif; font-size: 13px; font-weight: bold; margin-bottom: 12px; } @media print { h1 { font-weight: normal; } }
Comments
Post a Comment