jensimmons / cssremedy

Start your project with a remedy for the technical debt of CSS.
Mozilla Public License 2.0
2.2k stars 113 forks source link

`article, etc. {display:block;}` is not enough for oldIE #79

Closed thierryk closed 3 years ago

thierryk commented 3 years ago

Since styling HTML5 elements with display:block is not enough for oldIE to "fix" these elements, I suggest to add a comment to the rule so users understand the limitations of that rule. For example (with the addition of details):

/* @docs
label: HTML5 Elements

note: |
  Default block display on HTML5 elements
  For oldIE to apply this styling one needs to add some JS as well (i.e. `document.createElement("main")`)

links:
  - https://www.sitepoint.com/html5-older-browsers-and-the-shiv/

category: legacy browsers
*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}
Flo2ent commented 3 years ago

Also applied to FF-3: https://caniuse.com/html5semantic

thierryk commented 3 years ago

@Flo2ent yes, the category says "legacy browsers". The added comment refers to the fact that with oldIE, unlike with FF and others (i.e. Safari, Opera, etc. for main), the styling alone is not sufficient.

mirisuzanne commented 3 years ago

This works for me. Since the note will be parsed as markdown, we may want a period at the end of the first sentence. Want to submit a PR?

thierryk commented 3 years ago

@mirisuzanne sure! With the addition of details too, right?

mirisuzanne commented 3 years ago

yep, makes sense to me.

thierryk commented 3 years ago

Done!