🚿 A modern CSS reset

It has always bugged me that buttons don't default to the pointer cursor. An implementation that excludes the "disabled" attribute would make sense.

button {
    cursor: pointer;
}

button:disabled {
    cursor: default;
}

I think this is because of:

button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
  color: inherit;
}

and

input {
  border-radius: 0;
}

Should we add :not([type=checkbox]):not([type=radio]) to those?

This removes outlines around focused form elements, which is not consistently applied across all browsers. Most notably, Chrome recently rolled out an update which adds large outlines around focused form elements.

See also https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html

The button style adds a "color: inherit" property, which adds complexity to style the button

/* Apply cursor pointer to button elements */
button,
[type='button'],
[type='reset'],
[type='submit'],
[role='button'] {
  cursor: pointer;
  color: inherit;
}

Hi, I've noticed that the property word-break: break-word is behaving differently in different browsers. In particular, the content of an input tag, if too long, will break on multiple lines in Safari but not in Chrome.

Since the default value is word-break: normal I would suggest changing this. Let me know. Thanks

button:active color property is not reset. This is problematic in Safari which uses

input:matches([type="button"], [type="submit"], [type="reset"]):active, input[type="file"]::-webkit-file-upload-button:active, button:active {
  color: activebuttontext;
}

where activebuttontext is code for white.

/* Replace pointer cursor in disabled elements */
[disabled] {
  cursor: default;
}

This rule is overridden by the button rule that sets the cursor to pointer.

Solution: define the rule later in the CSS.

Rawgit has been in the sunset phase for a couple of years now (since October 2018) and the creator has encouraged people to use alternatives.

I have replaced the rawgit links with JSDelivr links.

Hi @filipelinhares,

I noticed that iframe on chrome (didn't test other browsers) have the following:

border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;

I was thinking that maybe we could add a border-style: none to align default styling. What do you think? Is this in the scope of this library?

Thank you in advance 😁

Before fix

• <a href="" aria-disabled="false"> => default cursor
• <a href="" aria-disabled="true"> => default cursor

After fix

• <a href="" aria-disabled="false"> => pointer cursor
• <a href="" aria-disabled="true"> => default cursor

Bumps ini from 1.3.5 to 1.3.8.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.