Reset only the block HTML elements #339

- used elements-of-type(html5-block) in all the reset stylesheets
  (instead of duplicate tag enumerations)
- removed dialog
- canvas is inline, not block

Closes GH-339, GH-462.
This commit is contained in:
Irina Dumitrascu 2011-07-07 00:20:35 +03:00 committed by Chris Eppstein
parent ff94ab79c9
commit 07819ccfbd
9 changed files with 30 additions and 31 deletions

View File

@ -17,7 +17,7 @@
form, label, legend,
caption, tbody, tfoot, thead, tr { @include blueprint-basic-reset; }
#{headers(all)} { @include blueprint-basic-reset(bp-reset-element); }
#{elements-of-type(html5)} { @include blueprint-reset-html5-element(bp-reset-element); }
#{elements-of-type(html5-block)} { @include blueprint-reset-html5-element(bp-reset-element); }
blockquote, q { @include blueprint-reset-quotation(bp-reset-element); }
th, td, caption { @include blueprint-reset-table-cell(bp-reset-element); }
table { @include blueprint-reset-table(bp-reset-element); }

View File

@ -105,7 +105,7 @@
// so they are rendered correctly in browsers that don't recognize them
// and reset in browsers that have default styles for them.
@mixin reset-html5 {
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
#{elements-of-type(html5-block)} {
@include reset-box-model;
display: block; } }

View File

@ -107,12 +107,11 @@
border: none; }
// Unrecognized elements are displayed inline.
// This reset provides a basic reset for html5 elements
// This reset provides a basic reset for block html5 elements
// so they are rendered correctly in browsers that don't recognize them
// and reset in browsers that have default styles for them.
@mixin reset-html5 {
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
#{elements-of-type(html5-block)} {
display: block; } }
// Resets the display of inline and block elements to their default display

View File

@ -1,12 +1,12 @@
module Compass::SassExtensions::Functions::Display
DEFAULT_DISPLAY = {
:block => %w{address blockquote center dir div dd dl dt fieldset form
frameset h1 h2 h3 h4 h5 h6 hr isindex menu noframes
noscript ol p pre ul
article aside dialog figure footer header hgroup nav section},
:inline => %w{a abbr acronym b basefont bdo big br cite code dfn em
font i img input kbd label q s samp select small span
strike strong sub sup textarea tt u var},
:block => %w{address article aside blockquote center dir div dd details dl dt fieldset
figcaption figure form footer frameset h1 h2 h3 h4 h5 h6 hr header hgroup
isindex menu nav noframes noscript ol p pre section summary ul},
:inline => %w{a abbr acronym audio b basefont bdo big br canvas cite code command
datalist dfn em embed font i img input keygen kbd label mark meter output
progress q rp rt ruby s samp select small span strike strong sub
sup textarea time tt u var video wbr},
:table => %w{table},
:"list-item" => %w{li},
:"table-row-group" => %w{tbody},
@ -14,12 +14,13 @@ module Compass::SassExtensions::Functions::Display
:"table-footer-group" => %w{tfoot},
:"table-row" => %w{tr},
:"table-cell" => %w{th td},
:html5 => %w{article aside dialog figure footer header hgroup nav section}
:"html5-block" => %w{article aside details figcaption figure footer header hgroup menu nav section summary},
:"html5-inline" => %w{audio canvas command datalist embed keygen mark meter output progress rp rt ruby time video wbr},
}
DEFAULT_DISPLAY[:html5] = (DEFAULT_DISPLAY[:"html5-block"] + DEFAULT_DISPLAY[:"html5-inline"]).sort
# returns a comma delimited string for all the
# elements according to their default css3 display value.
def elements_of_type(display)
Sass::Script::String.new(DEFAULT_DISPLAY.fetch(display.value.to_sym).join(", "))
end
end
end

View File

@ -42,8 +42,7 @@ q, blockquote {
a img {
border: none; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block; }
body {

View File

@ -3,7 +3,7 @@ html {
padding: 0;
border: 0; }
.bp-reset-element, body, h1, h2, h3, h4, h5, h6, article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote, q, th, td, caption, table, body.testing h1, body.testing h2, body.testing h3, body.testing h4, body.testing h5, body.testing h6, body.testing article, body.testing aside, body.testing dialog, body.testing figure, body.testing footer, body.testing header, body.testing hgroup, body.testing nav, body.testing section, body.testing blockquote, body.testing q, body.testing th, body.testing td, body.testing caption, body.testing table, div, span, object, iframe, p, pre, a, abbr, acronym, address, code, del, dfn, em, img, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr {
.bp-reset-element, body, h1, h2, h3, h4, h5, h6, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, blockquote, q, th, td, caption, table, body.testing h1, body.testing h2, body.testing h3, body.testing h4, body.testing h5, body.testing h6, body.testing article, body.testing aside, body.testing details, body.testing figcaption, body.testing figure, body.testing footer, body.testing header, body.testing hgroup, body.testing menu, body.testing nav, body.testing section, body.testing summary, body.testing blockquote, body.testing q, body.testing th, body.testing td, body.testing caption, body.testing table, div, span, object, iframe, p, pre, a, abbr, acronym, address, code, del, dfn, em, img, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr {
margin: 0;
padding: 0;
border: 0;
@ -13,7 +13,7 @@ html {
font-family: inherit;
vertical-align: baseline; }
article, aside, dialog, figure, footer, header, hgroup, nav, section {
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block; }
blockquote, q {
@ -35,7 +35,7 @@ table {
a img {
border: none; }
body.testing .bp-reset-element, body.testing body, body.testing h1, body.testing h2, body.testing h3, body.testing h4, body.testing h5, body.testing h6, body.testing article, body.testing aside, body.testing dialog, body.testing figure, body.testing footer, body.testing header, body.testing hgroup, body.testing nav, body.testing section, body.testing blockquote, body.testing q, body.testing th, body.testing td, body.testing caption, body.testing table, body.testing h1, body.testing h2, body.testing h3, body.testing h4, body.testing h5, body.testing h6, body.testing article, body.testing aside, body.testing dialog, body.testing figure, body.testing footer, body.testing header, body.testing hgroup, body.testing nav, body.testing section, body.testing blockquote, body.testing q, body.testing th, body.testing td, body.testing caption, body.testing table,
body.testing .bp-reset-element, body.testing body, body.testing h1, body.testing h2, body.testing h3, body.testing h4, body.testing h5, body.testing h6, body.testing article, body.testing aside, body.testing details, body.testing figcaption, body.testing figure, body.testing footer, body.testing header, body.testing hgroup, body.testing menu, body.testing nav, body.testing section, body.testing summary, body.testing blockquote, body.testing q, body.testing th, body.testing td, body.testing caption, body.testing table, body.testing h1, body.testing h2, body.testing h3, body.testing h4, body.testing h5, body.testing h6, body.testing article, body.testing aside, body.testing details, body.testing figcaption, body.testing figure, body.testing footer, body.testing header, body.testing hgroup, body.testing menu, body.testing nav, body.testing section, body.testing summary, body.testing blockquote, body.testing q, body.testing th, body.testing td, body.testing caption, body.testing table,
body.testing div, body.testing span, body.testing object, body.testing iframe, body.testing p,
body.testing pre, body.testing a, body.testing abbr, body.testing acronym, body.testing address,
body.testing code, body.testing del, body.testing dfn, body.testing em, body.testing img,
@ -50,7 +50,7 @@ body.testing caption, body.testing tbody, body.testing tfoot, body.testing thead
font-size: 100%;
font-family: inherit;
vertical-align: baseline; }
body.testing article, body.testing aside, body.testing dialog, body.testing figure, body.testing footer, body.testing header, body.testing hgroup, body.testing nav, body.testing section {
body.testing article, body.testing aside, body.testing details, body.testing figcaption, body.testing figure, body.testing footer, body.testing header, body.testing hgroup, body.testing menu, body.testing nav, body.testing section, body.testing summary {
display: block; }
body.testing blockquote, body.testing q {
quotes: "" ""; }

View File

@ -3,7 +3,7 @@ html {
padding: 0;
border: 0; }
.bp-reset-element, body, h1, h2, h3, h4, h5, h6, article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote, q, th, td, caption, table,
.bp-reset-element, body, h1, h2, h3, h4, h5, h6, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, blockquote, q, th, td, caption, table,
div, span, object, iframe, p,
pre, a, abbr, acronym, address,
code, del, dfn, em, img,
@ -19,7 +19,7 @@ caption, tbody, tfoot, thead, tr {
font-family: inherit;
vertical-align: baseline; }
article, aside, dialog, figure, footer, header, hgroup, nav, section {
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block; }
blockquote, q {

View File

@ -1,10 +1,10 @@
.noprint, .no-print {
display: none; }
address.print-only, blockquote.print-only, center.print-only, dir.print-only, div.print-only, dd.print-only, dl.print-only, dt.print-only, fieldset.print-only, form.print-only, frameset.print-only, h1.print-only, h2.print-only, h3.print-only, h4.print-only, h5.print-only, h6.print-only, hr.print-only, isindex.print-only, menu.print-only, noframes.print-only, noscript.print-only, ol.print-only, p.print-only, pre.print-only, ul.print-only, article.print-only, aside.print-only, dialog.print-only, figure.print-only, footer.print-only, header.print-only, hgroup.print-only, nav.print-only, section.print-only {
address.print-only, article.print-only, aside.print-only, blockquote.print-only, center.print-only, dir.print-only, div.print-only, dd.print-only, details.print-only, dl.print-only, dt.print-only, fieldset.print-only, figcaption.print-only, figure.print-only, form.print-only, footer.print-only, frameset.print-only, h1.print-only, h2.print-only, h3.print-only, h4.print-only, h5.print-only, h6.print-only, hr.print-only, header.print-only, hgroup.print-only, isindex.print-only, menu.print-only, nav.print-only, noframes.print-only, noscript.print-only, ol.print-only, p.print-only, pre.print-only, section.print-only, summary.print-only, ul.print-only {
display: block; }
a.print-only, abbr.print-only, acronym.print-only, b.print-only, basefont.print-only, bdo.print-only, big.print-only, br.print-only, cite.print-only, code.print-only, dfn.print-only, em.print-only, font.print-only, i.print-only, img.print-only, input.print-only, kbd.print-only, label.print-only, q.print-only, s.print-only, samp.print-only, select.print-only, small.print-only, span.print-only, strike.print-only, strong.print-only, sub.print-only, sup.print-only, textarea.print-only, tt.print-only, u.print-only, var.print-only {
a.print-only, abbr.print-only, acronym.print-only, audio.print-only, b.print-only, basefont.print-only, bdo.print-only, big.print-only, br.print-only, canvas.print-only, cite.print-only, code.print-only, command.print-only, datalist.print-only, dfn.print-only, em.print-only, embed.print-only, font.print-only, i.print-only, img.print-only, input.print-only, keygen.print-only, kbd.print-only, label.print-only, mark.print-only, meter.print-only, output.print-only, progress.print-only, q.print-only, rp.print-only, rt.print-only, ruby.print-only, s.print-only, samp.print-only, select.print-only, small.print-only, span.print-only, strike.print-only, strong.print-only, sub.print-only, sup.print-only, textarea.print-only, time.print-only, tt.print-only, u.print-only, var.print-only, video.print-only, wbr.print-only {
display: inline; }
.print-only {

View File

@ -42,19 +42,19 @@ q, blockquote {
a img {
border: none; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block; }
.unregistered-only, .registered-only {
display: none; }
body.registered a.registered-only, body.registered abbr.registered-only, body.registered acronym.registered-only, body.registered b.registered-only, body.registered basefont.registered-only, body.registered bdo.registered-only, body.registered big.registered-only, body.registered br.registered-only, body.registered cite.registered-only, body.registered code.registered-only, body.registered dfn.registered-only, body.registered em.registered-only, body.registered font.registered-only, body.registered i.registered-only, body.registered img.registered-only, body.registered input.registered-only, body.registered kbd.registered-only, body.registered label.registered-only, body.registered q.registered-only, body.registered s.registered-only, body.registered samp.registered-only, body.registered select.registered-only, body.registered small.registered-only, body.registered span.registered-only, body.registered strike.registered-only, body.registered strong.registered-only, body.registered sub.registered-only, body.registered sup.registered-only, body.registered textarea.registered-only, body.registered tt.registered-only, body.registered u.registered-only, body.registered var.registered-only {
body.registered a.registered-only, body.registered abbr.registered-only, body.registered acronym.registered-only, body.registered audio.registered-only, body.registered b.registered-only, body.registered basefont.registered-only, body.registered bdo.registered-only, body.registered big.registered-only, body.registered br.registered-only, body.registered canvas.registered-only, body.registered cite.registered-only, body.registered code.registered-only, body.registered command.registered-only, body.registered datalist.registered-only, body.registered dfn.registered-only, body.registered em.registered-only, body.registered embed.registered-only, body.registered font.registered-only, body.registered i.registered-only, body.registered img.registered-only, body.registered input.registered-only, body.registered keygen.registered-only, body.registered kbd.registered-only, body.registered label.registered-only, body.registered mark.registered-only, body.registered meter.registered-only, body.registered output.registered-only, body.registered progress.registered-only, body.registered q.registered-only, body.registered rp.registered-only, body.registered rt.registered-only, body.registered ruby.registered-only, body.registered s.registered-only, body.registered samp.registered-only, body.registered select.registered-only, body.registered small.registered-only, body.registered span.registered-only, body.registered strike.registered-only, body.registered strong.registered-only, body.registered sub.registered-only, body.registered sup.registered-only, body.registered textarea.registered-only, body.registered time.registered-only, body.registered tt.registered-only, body.registered u.registered-only, body.registered var.registered-only, body.registered video.registered-only, body.registered wbr.registered-only {
display: inline; }
body.registered address.registered-only, body.registered blockquote.registered-only, body.registered center.registered-only, body.registered dir.registered-only, body.registered div.registered-only, body.registered dd.registered-only, body.registered dl.registered-only, body.registered dt.registered-only, body.registered fieldset.registered-only, body.registered form.registered-only, body.registered frameset.registered-only, body.registered h1.registered-only, body.registered h2.registered-only, body.registered h3.registered-only, body.registered h4.registered-only, body.registered h5.registered-only, body.registered h6.registered-only, body.registered hr.registered-only, body.registered isindex.registered-only, body.registered menu.registered-only, body.registered noframes.registered-only, body.registered noscript.registered-only, body.registered ol.registered-only, body.registered p.registered-only, body.registered pre.registered-only, body.registered ul.registered-only, body.registered article.registered-only, body.registered aside.registered-only, body.registered dialog.registered-only, body.registered figure.registered-only, body.registered footer.registered-only, body.registered header.registered-only, body.registered hgroup.registered-only, body.registered nav.registered-only, body.registered section.registered-only {
body.registered address.registered-only, body.registered article.registered-only, body.registered aside.registered-only, body.registered blockquote.registered-only, body.registered center.registered-only, body.registered dir.registered-only, body.registered div.registered-only, body.registered dd.registered-only, body.registered details.registered-only, body.registered dl.registered-only, body.registered dt.registered-only, body.registered fieldset.registered-only, body.registered figcaption.registered-only, body.registered figure.registered-only, body.registered form.registered-only, body.registered footer.registered-only, body.registered frameset.registered-only, body.registered h1.registered-only, body.registered h2.registered-only, body.registered h3.registered-only, body.registered h4.registered-only, body.registered h5.registered-only, body.registered h6.registered-only, body.registered hr.registered-only, body.registered header.registered-only, body.registered hgroup.registered-only, body.registered isindex.registered-only, body.registered menu.registered-only, body.registered nav.registered-only, body.registered noframes.registered-only, body.registered noscript.registered-only, body.registered ol.registered-only, body.registered p.registered-only, body.registered pre.registered-only, body.registered section.registered-only, body.registered summary.registered-only, body.registered ul.registered-only {
display: block; }
body.unregistered a.unregistered-only, body.unregistered abbr.unregistered-only, body.unregistered acronym.unregistered-only, body.unregistered b.unregistered-only, body.unregistered basefont.unregistered-only, body.unregistered bdo.unregistered-only, body.unregistered big.unregistered-only, body.unregistered br.unregistered-only, body.unregistered cite.unregistered-only, body.unregistered code.unregistered-only, body.unregistered dfn.unregistered-only, body.unregistered em.unregistered-only, body.unregistered font.unregistered-only, body.unregistered i.unregistered-only, body.unregistered img.unregistered-only, body.unregistered input.unregistered-only, body.unregistered kbd.unregistered-only, body.unregistered label.unregistered-only, body.unregistered q.unregistered-only, body.unregistered s.unregistered-only, body.unregistered samp.unregistered-only, body.unregistered select.unregistered-only, body.unregistered small.unregistered-only, body.unregistered span.unregistered-only, body.unregistered strike.unregistered-only, body.unregistered strong.unregistered-only, body.unregistered sub.unregistered-only, body.unregistered sup.unregistered-only, body.unregistered textarea.unregistered-only, body.unregistered tt.unregistered-only, body.unregistered u.unregistered-only, body.unregistered var.unregistered-only {
body.unregistered a.unregistered-only, body.unregistered abbr.unregistered-only, body.unregistered acronym.unregistered-only, body.unregistered audio.unregistered-only, body.unregistered b.unregistered-only, body.unregistered basefont.unregistered-only, body.unregistered bdo.unregistered-only, body.unregistered big.unregistered-only, body.unregistered br.unregistered-only, body.unregistered canvas.unregistered-only, body.unregistered cite.unregistered-only, body.unregistered code.unregistered-only, body.unregistered command.unregistered-only, body.unregistered datalist.unregistered-only, body.unregistered dfn.unregistered-only, body.unregistered em.unregistered-only, body.unregistered embed.unregistered-only, body.unregistered font.unregistered-only, body.unregistered i.unregistered-only, body.unregistered img.unregistered-only, body.unregistered input.unregistered-only, body.unregistered keygen.unregistered-only, body.unregistered kbd.unregistered-only, body.unregistered label.unregistered-only, body.unregistered mark.unregistered-only, body.unregistered meter.unregistered-only, body.unregistered output.unregistered-only, body.unregistered progress.unregistered-only, body.unregistered q.unregistered-only, body.unregistered rp.unregistered-only, body.unregistered rt.unregistered-only, body.unregistered ruby.unregistered-only, body.unregistered s.unregistered-only, body.unregistered samp.unregistered-only, body.unregistered select.unregistered-only, body.unregistered small.unregistered-only, body.unregistered span.unregistered-only, body.unregistered strike.unregistered-only, body.unregistered strong.unregistered-only, body.unregistered sub.unregistered-only, body.unregistered sup.unregistered-only, body.unregistered textarea.unregistered-only, body.unregistered time.unregistered-only, body.unregistered tt.unregistered-only, body.unregistered u.unregistered-only, body.unregistered var.unregistered-only, body.unregistered video.unregistered-only, body.unregistered wbr.unregistered-only {
display: inline; }
body.unregistered address.unregistered-only, body.unregistered blockquote.unregistered-only, body.unregistered center.unregistered-only, body.unregistered dir.unregistered-only, body.unregistered div.unregistered-only, body.unregistered dd.unregistered-only, body.unregistered dl.unregistered-only, body.unregistered dt.unregistered-only, body.unregistered fieldset.unregistered-only, body.unregistered form.unregistered-only, body.unregistered frameset.unregistered-only, body.unregistered h1.unregistered-only, body.unregistered h2.unregistered-only, body.unregistered h3.unregistered-only, body.unregistered h4.unregistered-only, body.unregistered h5.unregistered-only, body.unregistered h6.unregistered-only, body.unregistered hr.unregistered-only, body.unregistered isindex.unregistered-only, body.unregistered menu.unregistered-only, body.unregistered noframes.unregistered-only, body.unregistered noscript.unregistered-only, body.unregistered ol.unregistered-only, body.unregistered p.unregistered-only, body.unregistered pre.unregistered-only, body.unregistered ul.unregistered-only, body.unregistered article.unregistered-only, body.unregistered aside.unregistered-only, body.unregistered dialog.unregistered-only, body.unregistered figure.unregistered-only, body.unregistered footer.unregistered-only, body.unregistered header.unregistered-only, body.unregistered hgroup.unregistered-only, body.unregistered nav.unregistered-only, body.unregistered section.unregistered-only {
body.unregistered address.unregistered-only, body.unregistered article.unregistered-only, body.unregistered aside.unregistered-only, body.unregistered blockquote.unregistered-only, body.unregistered center.unregistered-only, body.unregistered dir.unregistered-only, body.unregistered div.unregistered-only, body.unregistered dd.unregistered-only, body.unregistered details.unregistered-only, body.unregistered dl.unregistered-only, body.unregistered dt.unregistered-only, body.unregistered fieldset.unregistered-only, body.unregistered figcaption.unregistered-only, body.unregistered figure.unregistered-only, body.unregistered form.unregistered-only, body.unregistered footer.unregistered-only, body.unregistered frameset.unregistered-only, body.unregistered h1.unregistered-only, body.unregistered h2.unregistered-only, body.unregistered h3.unregistered-only, body.unregistered h4.unregistered-only, body.unregistered h5.unregistered-only, body.unregistered h6.unregistered-only, body.unregistered hr.unregistered-only, body.unregistered header.unregistered-only, body.unregistered hgroup.unregistered-only, body.unregistered isindex.unregistered-only, body.unregistered menu.unregistered-only, body.unregistered nav.unregistered-only, body.unregistered noframes.unregistered-only, body.unregistered noscript.unregistered-only, body.unregistered ol.unregistered-only, body.unregistered p.unregistered-only, body.unregistered pre.unregistered-only, body.unregistered section.unregistered-only, body.unregistered summary.unregistered-only, body.unregistered ul.unregistered-only {
display: block; }