andy-set-studio / modern-css-reset Goto Github PK

Based on this excellent post by Zach https://www.zachleat.com/web/fluid-images/

From this comment

The reduced motion CSS will break any functionality relying on the JS “transitionend” event.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event

If there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.

I think a tiny value like 1ms instead of 0s can fix this.

Really nice usage of the [class] attribute :)
In my project, I added one for removing button styles from buttons with a class attribute.

button[class] {
    padding: 0;
    margin: 0;
    border: none;
    line-height: inherit;
    color: inherit;
    background: none;
}

I noticed that margin is being reset but the padding is not. Is there a reason for this?
For example (in Firefox 87) <UL> has a padding of 16px on both the top and bottom.

Caveat: I only mention this because of the code golf-y nature of your reset.

I’m not actually aware of any user agent, Blink, Gecko/Quantum, WebKit, or EdgeHTML (whose stylesheet is, technically, closed-source, whatever sense that makes) that applies a margin to li elements, and so this line may be unnecessary:

https://github.com/hankchizljaw/modern-css-reset/blob/12e77f9a895255554e339b3de2c09b12f085dea3/src/reset.css#L23

Reported by Adrian on Twitter: https://twitter.com/aardrian/status/1181691556404830209?s=21

I'm just wondering about your choice of setting body to min-height: 100vh and the implications it has for mobile devices?

Here's an article that helped me recently with an issue I was having on iPhone:

https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html

Hello! It's perfect idea to store so much good practices in a single CSS file available from NPM.

But some styles can cause a problems.

1. I do not want to use all images as block. Sometimes I want to inline an image, and browser default is inline.

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

I suggest to remove display: block from here.

2. I do not always want to get some margins somewhere in article.

I can use this tag for very custom design, and top margin on each child is not what I want. If I want vertical margins between elements, I use <h1> and <p>.

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

I suggest to remove this part.

All other code is amazing, I want to use it on every website I make.

Hey everyone! So, I've been using this CSS reset on some client and personal projects and I've noticed that my layouts constantly get out of shape because of user agent styling on Microsoft Edge (haven't tested this on any other browser). This user agent styling applies a padding-inline-start of 40px. I was constantly being bamboozled by this issue and it would be helpful to add

padding-inline-start: 0px;

to somewhere in the reset

Let me know what you think!

Best,
Benjamin Lebron

Re: ul[class], ol[class] from #10

The beauty of this reset is that it's so tiny, taking elements away that are causing problems is really easy. A few people don’t like the ul[class], ol[class] stuff and my response to them each time is basically “don't use them, then”.
-- #10 (comment)

@hankchizljaw, I noticed when including ul[class], ol[class] (which I love in theory), that if I give a list a class name like .list, its styles are still overridden by ul[class], which has higher specificity. So to override the reset, I'd need to use a selector like ul.list. Is this intentional, or how do you handle list styles when using ul[class], ol[class] in the reset?

I get that I could simply "don't use them, then", which is a perfectly suitable solution. But I'm interested to hear what your approach to styling lists is, with this reset. Thanks!

This isn't a pull request as it may be deemed a bold move. Whereas I'm yet to experience any situation where a border is required on an iframe, I wonder if they exist by default for a reason I'm not aware of.

Having used this reset of a few recent projects, I find myself adding:

iframe {border:0}

here is wrong way min-height: 100vh; for body because webkit not valid and on iPad it will count + height of submenu (tab bar)... recomendation - min-height: 100%;

Safari has a default margin for the button element.

I think it should be resetted as other elements.

The line-height property with a value of 1.5 is a good default value, but maybe something opiniated that could be removed, because it will certainly be adjusted according to the design needs.

Another reason is that WordPress (and maybe other tools) allows us to generate some styles from a json file. As these base styles are declared before any other stylesheet, we can't use the generated value for line-height because it will be loaded too early and overloaded.

Would you accept a PR to remove that property?

Hi Andy,

Your modern CSS Reset is awesome. We needed a new approach on the whole reset thing and you did a great job.

Anyway I may have an issue / question about the min-height: 100vh; you put on the body element.

I was reading a few days ago this article that we should not use this on mobile because of address bar and all. Here you have an other article about that too.

That's not an issue per say, I'm curious on your thoughts about this subject.

Thank you for your time.

Cheers! ✌️

I make a mistake.
sorry.

I saw @hankchizljaw's tweet and thought this might be a very sensible thing to include...

Include a default scroll-margin-top value for any element with an id attribute.

[id] {
  scroll-margin-top: 2ex;
}

Hi there,

Not sure about this, but it could make sense to add this for old browsers:

[hidden] {
   display: none;
}

Seen here: Hiding elements from all devices

Hi, thanks for your incredible blog post, thanks for sharing!

I actually maintain my own, private use css reset* se I'm always happy to learn new techniques.

I tried your text-rendering: optimizeSpeed;, interested by the speed justification.

However, when testing it, it dramatically dropped the legibility on Chrome latest. Worst, it suppressed the automatic computing of weight variations of a woff2 font from google font, making font-weight useless!

I promptly put back text-rendering: optimizeLegibility;

Just wanted to share this experience.

*https://github.com/Offirmo/offirmo-monorepo/tree/master/2-advanced/view-css in case you're curious

should we use:

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

better than

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

In your reset, I made a slight addition by adding the address selector to the resets that is used for the inputs and buttons. The address element, by default, is rendered italic.

e.g.

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select,
address {
  font: inherit;
}

You open for a PR of this or does it have any negative effects?

Hi,

I'm using the reset along with the CUBE CSS methodology. I have a container with a .flow class applied:

.flow > * + * {
    margin-top: 1rem;
}

Inside this container there are several elements (h1, p, ul…). The top margins are applied correctly, so the vertical rhythm is correct:

<div class="flow">
<h1>Lorem</h1>
<p>Ipsum</p>
<ul>…</ul>
</div>

However, if I add a ul which has a class, it doesn't respect the flow, because this rule in reset.css:

body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
  margin: 0;
}

This selector: ul[class] has a higher specificity than .flow > * + *, so the top margin isn't applied.

How would you tackle this situation? What do you think about changing ul[class] and ol[class] with just ul and ol?

Right now, the reset removes all padding, margin and list styles from lists that have a class attribute. This is causing problems in the community and it's something I'd like to remedy.

Proposed change

I propose that margin and padding are left as they are. They can be removed on a per-context basis, as required. The immediate removal is my preference and as this thing has exploded in popularity, that really doesn't hold water anymore.

With those removed, I also propose that list styles are only removed when the list has a role of list on it, like so:

<ul role="list"></ul>

This is because, frustratingly, the list-style: none rule can cause problems for assistive technology.

Old CSS

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

New, proposed CSS

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

Comments welcome.

Hello!

I've been using your reset for a while (it's great btw thanks), and I've noticed a weird bug on Firefox (87.0) and Ubuntu. When I click on a select element, the dropdown appears for a fraction of a second, then disapears (I need to click again to have the regular select behaviour). Then if I move the focus elsewhere, and click again on the select, nothing appears on the first click.

I've tracked down the problem to this part of the reset

html:focus-within {
  scroll-behavior: smooth;
}  

I've made a codepen so that you can try and see if you can reproduce the issue https://codepen.io/kimlai/pen/PoWjMyv.

I don't know what's happening, and it's most probably a bug in Firefox, but I thought that I'd let you know, since it makes the reset unusable as is (at least for me).