This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 27019 - Rendering: simplifications to the user-agent stylesheet
Summary: Rendering: simplifications to the user-agent stylesheet
Status: RESOLVED FIXED
Alias: None
Product: WHATWG
Classification: Unclassified
Component: HTML (show other bugs)
Version: unspecified
Hardware: Other other
: P3 normal
Target Milestone: Unsorted
Assignee: Ian 'Hixie' Hickson
QA Contact: contributor
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2014-10-10 16:18 UTC by Simon Sapin
Modified: 2014-10-28 18:39 UTC (History)
2 users (show)

See Also:


Attachments

Description Simon Sapin 2014-10-10 16:18:57 UTC
In the rendering chapters, I believe some of the prose can be expressed as CSS instead:

> The user agent is expected to force the 'display' property of input
> elements whose type attribute is in the Hidden state to compute to
> 'none', irrespective of CSS rules.

input[type=hidden i] { display: none !important }

The cascade ensures that !important rules in UA stylesheet can only be overridden by other such rules (which are controlled by implementers).


> If x is a selector that matches elements that are either article,
> aside, nav, or section elements, then the following rules capture
> what is expected:

Although readability is not great when doing the replacement, x is :matches(article, aside, nav, section)

http://dev.w3.org/csswg/selectors4/#matches


> In HTML documents, the user agent is expected to force the 'display'
> property of form elements that are children of table, thead, tbody,
> tfoot, or tr elements to compute to 'none', irrespective of CSS
> rules.

Except for the "In HTML documents" part:

:matches(table, thead, tbody, tfoot, tr) > form {
  display: none !important;
}


:matches() can also simplify some rules. It’s especially useful to avoid combinatorial explosion, but I find it can still help readability in other cases.

> dir dir, dir dl, dir menu, dir ol, dir ul,
> dl dir, dl dl, dl menu, dl ol, dl ul,
> menu dir, menu dl, menu menu, menu ol, menu ul,
> ol dir, ol dl, ol menu, ol ol, ol ul,
> ul dir, ul dl, ul menu, ul ol, ul ul {
>   margin-top: 0; margin-bottom: 0;
> }

:matches(dir, dl, menu, ol, ul) :matches(dir, dl, menu, ol, ul) {
  margin-top: 0; margin-bottom: 0;
}


> dir dir, dir menu, dir ul,
> menu dir, menu menu, menu ul,
> ol dir, ol menu, ol ul,
> ul dir, ul menu, ul ul {
>   list-style-type: circle;
> }
> 
> dir dir dir, dir dir menu, dir dir ul,
> dir menu dir, dir menu menu, dir menu ul,
> dir ol dir, dir ol menu, dir ol ul,
> dir ul dir, dir ul menu, dir ul ul,
> menu dir dir, menu dir menu, menu dir ul,
> menu menu dir, menu menu menu, menu menu ul,
> menu ol dir, menu ol menu, menu ol ul,
> menu ul dir, menu ul menu, menu ul ul,
> ol dir dir, ol dir menu, ol dir ul,
> ol menu dir, ol menu menu, ol menu ul,
> ol ol dir, ol ol menu, ol ol ul,
> ol ul dir, ol ul menu, ol ul ul,
> ul dir dir, ul dir menu, ul dir ul,
> ul menu dir, ul menu menu, ul menu ul,
> ul ol dir, ul ol menu, ul ol ul,
> ul ul dir, ul ul menu, ul ul ul {
>   list-style-type: square;
> }

:matches(dir, menu, ol, ul) :matches(dir, menu, ul) {
  list-style-type: circle;
}

:matches(dir, menu, ol, ul) :matches(dir, menu, ol, ul) :matches(dir, menu, ul) {
  list-style-type: square;
}


> table[rules=none i], table[rules=groups i], table[rules=rows i],
> table[rules=cols i], table[rules=all i], table[frame=void i],
> table[frame=above i], table[frame=below i], table[frame=hsides i],
> table[frame=lhs i], table[frame=rhs i], table[frame=vsides i],
> table[frame=box i], table[frame=border i],
> table[rules=none i] > tr > td, table[rules=none i] > tr > th,
> table[rules=groups i] > tr > td, table[rules=groups i] > tr > th,
> table[rules=rows i] > tr > td, table[rules=rows i] > tr > th,
> table[rules=cols i] > tr > td, table[rules=cols i] > tr > th,
> table[rules=all i] > tr > td, table[rules=all i] > tr > th,
> table[rules=none i] > thead > tr > td, table[rules=none i] > thead > tr > th,
> table[rules=groups i] > thead > tr > td, table[rules=groups i] > thead > tr > th,
> table[rules=rows i] > thead > tr > td, table[rules=rows i] > thead > tr > th,
> table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,
> table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,
> table[rules=none i] > tbody > tr > td, table[rules=none i] > tbody > tr > th,
> table[rules=groups i] > tbody > tr > td, table[rules=groups i] > tbody > tr > th,
> table[rules=rows i] > tbody > tr > td, table[rules=rows i] > tbody > tr > th,
> table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,
> table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th,
> table[rules=none i] > tfoot > tr > td, table[rules=none i] > tfoot > tr > th,
> table[rules=groups i] > tfoot > tr > td, table[rules=groups i] > tfoot > tr > th,
> table[rules=rows i] > tfoot > tr > td, table[rules=rows i] > tfoot > tr > th,
> table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th,
> table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
>   border-color: black;
> }

table:matches(
  [rules=none i], [rules=groups i], [rules=rows i],
  [rules=cols i], [rules=all i],
  [frame=void i], [frame=above i], [frame=below i],
  [frame=hsides i], [frame=lhs i], [frame=rhs i],
  [frame=vsides i], [frame=box i], [frame=border i]
),
table:matches(
  [rules=none i], [rules=groups i], [rules=rows i],
  [rules=cols i], [rules=all i]
) > tr > :matches(td, th),
table:matches(
  [rules=none i], [rules=groups i], [rules=rows i],
  [rules=cols i], [rules=all i]
) > :matches(thead, tbody, tfoot) > tr > :matches(td, th) {
  border-color: black;
}


> thead[align=absmiddle i], tbody[align=absmiddle i], tfoot[align=absmiddle i],
> tr[align=absmiddle i], td[align=absmiddle i], th[align=absmiddle i] {
>   text-align: center;
> }

:matches(thead, tbody, tfoot, tr, td, th)[align=absmiddle i] {
  text-align: center;
}


> p[align=left i], h1[align=left i], h2[align=left i], h3[align=left i],
> h4[align=left i], h5[align=left i], h6[align=left i] {
>   text-align: left;
> }
> p[align=right i], h1[align=right i], h2[align=right i], h3[align=right i],
> h4[align=right i], h5[align=right i], h6[align=right i] {
>   text-align: right;
> }
> p[align=center i], h1[align=center i], h2[align=center i], h3[align=center i],
> h4[align=center i], h5[align=center i], h6[align=center i] {
>   text-align: center;
> }
> p[align=justify i], h1[align=justify i], h2[align=justify i], h3[align=justify i],
> h4[align=justify i], h5[align=justify i], h6[align=justify i] {
>   text-align: justify;
> }
> thead[valign=top i], tbody[valign=top i], tfoot[valign=top i],
> tr[valign=top i], td[valign=top i], th[valign=top i] {
>   vertical-align: top;
> }
> thead[valign=middle i], tbody[valign=middle i], tfoot[valign=middle i],
> tr[valign=middle i], td[valign=middle i], th[valign=middle i] {
>   vertical-align: middle;
> }
> thead[valign=bottom i], tbody[valign=bottom i], tfoot[valign=bottom i],
> tr[valign=bottom i], td[valign=bottom i], th[valign=bottom i] {
>   vertical-align: bottom;
> }
> thead[valign=baseline i], tbody[valign=baseline i], tfoot[valign=baseline i],
> tr[valign=baseline i], td[valign=baseline i], th[valign=baseline i] {
>   vertical-align: baseline;
> }

:matches(p, h1, h2, h3, h4, h5, h6)[align=left i] { text-align: left; }
:matches(p, h1, h2, h3, h4, h5, h6)[align=right i] { text-align: right; }
:matches(p, h1, h2, h3, h4, h5, h6)[align=center i] { text-align: center; }
:matches(p, h1, h2, h3, h4, h5, h6)[align=justify i] { text-align: justify; }
:matches(thead, tbody, tfoot, tr, td, th)[valign=top i] { vertical-align: top; }
:matches(thead, tbody, tfoot, tr, td, th)[valign=middle i] { vertical-align: middle; }
:matches(thead, tbody, tfoot, tr, td, th)[valign=bottom i] { vertical-align: bottom; }
:matches(thead, tbody, tfoot, tr, td, th)[valign=baseline i] { vertical-align: baseline; }


> table[rules=none i], table[rules=groups i], table[rules=rows i],
> table[rules=cols i], table[rules=all i] {
>   border-style: hidden;
>   border-collapse: collapse;
> }

table:matches([rules=none i], [rules=groups i], [rules=rows i], [rules=cols i], [rules=all i]) {
  border-style: hidden;
  border-collapse: collapse;
}


> table[border] > tr > td, table[border] > tr > th,
> table[border] > thead > tr > td, table[border] > thead > tr > th,
> table[border] > tbody > tr > td, table[border] > tbody > tr > th,
> table[border] > tfoot > tr > td, table[border] > tfoot > tr > th {
>   /* only if border is not equivalent to zero */
>   border-width: 1px;
>   border-style: inset;
> }
> table[rules=none i] > tr > td, table[rules=none i] > tr > th,
> table[rules=none i] > thead > tr > td, table[rules=none i] > thead > tr > th,
> table[rules=none i] > tbody > tr > td, table[rules=none i] > tbody > tr > th,
> table[rules=none i] > tfoot > tr > td, table[rules=none i] > tfoot > tr > th,
> table[rules=groups i] > tr > td, table[rules=groups i] > tr > th,
> table[rules=groups i] > thead > tr > td, table[rules=groups i] > thead > tr > th,
> table[rules=groups i] > tbody > tr > td, table[rules=groups i] > tbody > tr > th,
> table[rules=groups i] > tfoot > tr > td, table[rules=groups i] > tfoot > tr > th,
> table[rules=rows i] > tr > td, table[rules=rows i] > tr > th,
> table[rules=rows i] > thead > tr > td, table[rules=rows i] > thead > tr > th,
> table[rules=rows i] > tbody > tr > td, table[rules=rows i] > tbody > tr > th,
> table[rules=rows i] > tfoot > tr > td, table[rules=rows i] > tfoot > tr > th {
>   border-width: 1px;
>   border-style: none;
> }
> table[rules=cols i] > tr > td, table[rules=cols i] > tr > th,
> table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,
> table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,
> table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th {
>   border-width: 1px;
>   border-style: none solid;
> }
> table[rules=all i] > tr > td, table[rules=all i] > tr > th,
> table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,
> table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th,
> table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
>   border-width: 1px;
>   border-style: solid;
> }

table[border] > tr > :matches(td, th),
table[border] > :matches(thead, tbody, tfoot) > tr > :matches(td, th) {
  /* only if border is not equivalent to zero */
  border-width: 1px;
  border-style: inset;
}

table:matches([rules=none i], [rules=groups i], [rules=rows i]) > tr > :matches(td, th),
table:matches([rules=none i], [rules=groups i], [rules=rows i]) > :matches(thead, tbody, tfoot) > tr > :matches(td, th) {
  border-width: 1px;
  border-style: none;
}
table[rules=cols i] > tr > :matches(td, th),
table[rules=cols i] > :matches(thead, tbody, tfoot) > tr > :matches(td, th) {
  border-width: 1px;
  border-style: none solid;
}
table[rules=all i] > tr > :matches(td, th),
table[rules=all i] > :matches(thead, tbody, tfoot) > tr > :matches(td, th) {
  border-width: 1px;
  border-style: solid;
}


> table[rules=groups i] > thead,
> table[rules=groups i] > tbody,
> table[rules=groups i] > tfoot {
>   border-top-width: 1px;
>   border-top-style: solid;
>   border-bottom-width: 1px;
>   border-bottom-style: solid;
> }

table[rules=groups i] > :matches(thead, tbody, tfoot) {
  border-top-width: 1px;
  border-top-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}


> table[rules=rows i] > tr, table[rules=rows i] > thead > tr,
> table[rules=rows i] > tbody > tr, table[rules=rows i] > tfoot > tr {
>   border-top-width: 1px;
>   border-top-style: solid;
>   border-bottom-width: 1px;
>   border-bottom-style: solid;
> }

table[rules=rows i] > tr,
table[rules=rows i] > :matches(thead, tbody, tfoot) > tr {
  border-top-width: 1px;
  border-top-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}


> 
> iframe[frameborder=0], iframe[frameborder=no i] { border: none; }
> 
> applet[align=left i], embed[align=left i], iframe[align=left i],
> img[align=left i], input[type=image i][align=left i], object[align=left i] {
>   float: left;
> }
> 
> applet[align=right i], embed[align=right i], iframe[align=right i],
> img[align=right i], input[type=image i][align=right i], object[align=right i] {
>   float: right;
> }
> 
> applet[align=top i], embed[align=top i], iframe[align=top i],
> img[align=top i], input[type=image i][align=top i], object[align=top i] {
>   vertical-align: top;
> }
> 
> applet[align=baseline i], embed[align=baseline i], iframe[align=baseline i],
> img[align=baseline i], input[type=image i][align=baseline i], object[align=baseline i] {
>   vertical-align: baseline;
> }
> 
> applet[align=texttop i], embed[align=texttop i], iframe[align=texttop i],
> img[align=texttop i], input[type=image i][align=texttop i], object[align=texttop i] {
>   vertical-align: text-top;
> }
> 
> applet[align=absmiddle i], embed[align=absmiddle i], iframe[align=absmiddle i],
> img[align=absmiddle i], input[type=image i][align=absmiddle i], object[align=absmiddle i],
> applet[align=abscenter i], embed[align=abscenter i], iframe[align=abscenter i],
> img[align=abscenter i], input[type=image i][align=abscenter i], object[align=abscenter i] {
>   vertical-align: middle;
> }
> 
> applet[align=bottom i], embed[align=bottom i], iframe[align=bottom i],
> img[align=bottom i], input[type=image i][align=bottom i],
> object[align=bottom i] {
>   vertical-align: bottom;
> }

:matches(applet, embed, iframe, img, input[type=image i], object)[align=left i] {
  float: left;
}
:matches(applet, embed, iframe, img, input[type=image i], object)[align=right i] {
  float: right;
}
:matches(applet, embed, iframe, img, input[type=image i], object)[align=top i] {
  vertical-align: top;
}
:matches(applet, embed, iframe, img, input[type=image i], object)[align=baseline i] {
  vertical-align: baseline;
}
:matches(applet, embed, iframe, img, input[type=image i], object)[align=texttop i] {
  vertical-align: text-top;
}
:matches(applet, embed, iframe, img, input[type=image i], object):matches([align=absmiddle i], [align=abscenter i]) {
  vertical-align: middle;
}
:matches(applet, embed, iframe, img, input[type=image i], object)[align=bottom i] {
  vertical-align: bottom;
}
Comment 1 Ian 'Hixie' Hickson 2014-10-28 18:37:21 UTC
I left the table-related ones and the applet/img/object ones alone, since I'm not convinced the new style is clearer than the old style. But I changed the others.
Comment 2 contributor 2014-10-28 18:39:53 UTC
Checked in as WHATWG revision r8843.
Check-in comment: Update the way some of the selectors are written to use more modern selector features.
https://html5.org/tools/web-apps-tracker?from=8842&to=8843