Skip to content
Browse files

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
- cavas is inline, not block
  • Loading branch information...
1 parent 42bb556 commit 32c43db3b8ec4882ca24f9d003fd1cdf1acc5787 @dira committed
View
2 frameworks/blueprint/stylesheets/blueprint/reset/_utilities.scss
@@ -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
2 frameworks/compass/stylesheets/compass/reset/_utilities-legacy.scss
@@ -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
5 frameworks/compass/stylesheets/compass/reset/_utilities.scss
@@ -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
22 lib/compass/sass_extensions/functions/display.rb
@@ -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,7 +14,11 @@ 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 => %w{article aside audio canvas command datalist details embed figcaption figure
@dira Owner
dira added a note

I'm not sure if this definition should be kept or not.

In theory people might have used elements-of-type(html5) for styling purposes, but I don't see a real use case for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ # footer header hgroup keygen mark menu meter nav output progress ra rt ruby
+ # section summary time video wbr},
+ :"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},
}
# returns a comma delimited string for all the
@@ -22,4 +26,4 @@ module Compass::SassExtensions::Functions::Display
def elements_of_type(display)
Sass::Script::String.new(DEFAULT_DISPLAY.fetch(display.value.to_sym).join(", "))
end
-end
+end
View
3 test/fixtures/stylesheets/blueprint/css/screen.css
@@ -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
8 test/fixtures/stylesheets/blueprint/css/single-imports/reset-utilities.css
@@ -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
4 test/fixtures/stylesheets/blueprint/css/single-imports/reset.css
@@ -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
4 test/fixtures/stylesheets/compass/css/print.css
@@ -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
12 test/fixtures/stylesheets/compass/css/reset.css
@@ -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; }

0 comments on commit 32c43db

Please sign in to comment.
Something went wrong with that request. Please try again.