Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using the universal selector to set box-sizing #1497

Closed
dbakker opened this issue Jan 21, 2016 · 7 comments
Closed

Using the universal selector to set box-sizing #1497

dbakker opened this issue Jan 21, 2016 · 7 comments

Comments

@dbakker
Copy link

dbakker commented Jan 21, 2016

One extremely popular way to set box-sizing is like this (e.g. in twitter bootstrap and websites such as github itself):

*, *:before, *:after {
  box-sizing: border-box;
}

However, reading from the documentation:

The universal selector * may not be used in author stylesheets. This is because it can have negative performance implications and could be used to circumvent the rules set out in the following paragraph.

If I understand this correctly, this means amphtml developers need to use an explicit list of all HTML5 elements they may need, e.g.:

a, a:before, a:after,
abbr, abbr:before, abbr:after,
address, address:before, address:after,
area, area:before, area:after,
article, article:before, article:after,
aside, aside:before, aside:after,
amp-audio, amp-audio:before, amp-audio:after,
b, b:before, b:after,
bdi, bdi:before, bdi:after,
bdo, bdo:before, bdo:after,
blockquote, blockquote:before, blockquote:after,
button, button:before, button:after,
canvas, canvas:before, canvas:after,
caption, caption:before, caption:after,
cite, cite:before, cite:after,
code, code:before, code:after,
col, col:before, col:after,
colgroup, colgroup:before, colgroup:after,
datalist, datalist:before, datalist:after,
dd, dd:before, dd:after,
del, del:before, del:after,
details, details:before, details:after,
dfn, dfn:before, dfn:after,
dialog, dialog:before, dialog:after,
div, div:before, div:after,
dl, dl:before, dl:after,
dt, dt:before, dt:after,
em, em:before, em:after,
fieldset, fieldset:before, fieldset:after,
figcaption, figcaption:before, figcaption:after,
figure, figure:before, figure:after,
footer, footer:before, footer:after,
h1, h1:before, h1:after,
h2, h2:before, h2:after,
h3, h3:before, h3:after,
h4, h4:before, h4:after,
h5, h5:before, h5:after,
h6, h6:before, h6:after,
header, header:before, header:after,
hgroup, hgroup:before, hgroup:after,
hr, hr:before, hr:after,
i, i:before, i:after,
amp-iframe, amp-iframe:before, amp-iframe:after,
amp-img, amp-img:before, amp-img:after,
ins, ins:before, ins:after,
kbd, kbd:before, kbd:after,
keygen, keygen:before, keygen:after,
label, label:before, label:after,
legend, legend:before, legend:after,
li, li:before, li:after,
main, main:before, main:after,
map, map:before, map:after,
mark, mark:before, mark:after,
menu, menu:before, menu:after,
menuitem, menuitem:before, menuitem:after,
meter, meter:before, meter:after,
nav, nav:before, nav:after,
noscript, noscript:before, noscript:after,
ol, ol:before, ol:after,
optgroup, optgroup:before, optgroup:after,
output, output:before, output:after,
p, p:before, p:after,
pre, pre:before, pre:after,
progress, progress:before, progress:after,
q, q:before, q:after,
rp, rp:before, rp:after,
rt, rt:before, rt:after,
s, s:before, s:after,
samp, samp:before, samp:after,
section, section:before, section:after,
small, small:before, small:after,
source, source:before, source:after,
span, span:before, span:after,
strong, strong:before, strong:after,
sub, sub:before, sub:after,
summary, summary:before, summary:after,
sup, sup:before, sup:after,
table, table:before, table:after,
tbody, tbody:before, tbody:after,
td, td:before, td:after,
tfoot, tfoot:before, tfoot:after,
th, th:before, th:after,
thead, thead:before, thead:after,
time, time:before, time:after,
tr, tr:before, tr:after,
track, track:before, track:after,
u, u:before, u:after,
ul, ul:before, ul:after,
amp-video, amp-video:before, amp-video:after,
wbr, wbr:before, wbr:after
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Note: I haven't rigorously tested this but it seems to work on my site for now.

Is this what you recommend? If so, it might be useful to add a snippet like this in the documentation or to suggest developers a better alternative so that they (and me) will have an easier time migrating.

@cramforce
Copy link
Member

@dvoytenko Do you expect AMP to be generally robust with respect to different box sizing?

I think the easiest solution would be to add a class called amp-border-box into the core CSS, people can just do html class="amp-border-box" and don't need to use the universal selector themselves.

@dvoytenko
Copy link
Contributor

We should be robust. But we definitely need to retest. We can either do amp-border-box class or we can discuss if we can support this kind of precise validation in the Validator.

@rudygalfi
Copy link
Contributor

Can this be closed since #1508 was merged?

@dvoytenko
Copy link
Contributor

Yes.

@azizhk
Copy link

azizhk commented May 27, 2016

Please guide me with this PR:
#3360

It adds box-sizing to all elements but it can be easily overriden.

@dandv
Copy link
Contributor

dandv commented Sep 20, 2018

The universal selector * may not be used in author stylesheets.

Is this restriction still in place? I don't see it at https://www.ampproject.org/docs/design/responsive/style_pages.

@azizhk
Copy link

azizhk commented Sep 21, 2018

The restriction was removed in #6111

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants