nicolas-cusan / destyle.css Goto Github PK

destyle's base line-height is 1.15 and this violates the WCAG Success Criterion 1.4.12: Text Spacing.
To suits the criterion, line-height must be "at least 1.5 times the font size".
So, html element's style should be:
html {
line-height: 1.5; /* 1 /
-webkit-text-size-adjust: 100%; / 2 /
-webkit-tap-highlight-color: transparent; / 3*/
}

It seems that in Chrome the default border color is set to gray. The text color should be inherited.

Bug Description

The declaration font: inherit on inputs causes the placeholder to be offset from center on Mozilla Firefox

Code Example:

https://codesandbox.io/s/hopeful-meitner-ru143

Specs

• Browser version 68.0.1 (64-bit)
• destyle.css 1.0.8

I noticed an issue with one style rule:

button,
input,
optgroup,
select,
textarea {
  ...
  border: inherit;
  ...
}

Imagine using one of these elements within any container having a border. It will get inherited which makes no sense.

I would recommend to set it to border: none or border: 0.

Hi!
First of all thanks for this small package that I use systematically in all my projects 👍

I've just updated destyle.css today, and now all my inputs have their borders removed 😭

I've seen that you've changed the selector declaration for input 2 days ago, would it be the reason?

In my browser, I can see that the destyle.css styles for input take precedence over my styles (which use classes):

So of course, I'm complaining about the border, but there are also other properties that are overwritten (border is just the most visibly obvious).

Nice work, however I encountered several issues if what I’m understanding you’re trying to do is right (by removing all styles added by the browser?):

Using iPhone 7 Plus/iOS 12.1.2 on Mobile Safari, there are some elements that still have their default browser styles. Open your test page at
https://nicolas-cusan.github.io/destyle.css/test.html and find the following elements by what’s contained in their content (viewing the source of the page is a challenge without my laptop):

• Said no one, ever.
• Definition List Title
• Table Heading 1 (through 5)
• Table Footer 1 (through 5)
• Keyboard input: Cmd
• Inline code: <div>code</div>
• Sample output: This is sample output from a computer program.
• Pre-formatted text
  P R E F O R M A T T E D T E X T
  ! " # $ % & ' ( ) * + , - . /
  0 1 2 3 4 5 6 7 8 9 : ; < = > ?
  @ A B C D E F G H I J K L M N O
  P Q R S T U V W X Y Z [ \ ] ^ _
  ` a b c d e f g h i j k l m n o
  p q r s t u v w x y z { | } ~
• Strong is used to indicate strong importance.
• This text has added emphasis.
• The b element is stylistically different text from normal text, without any special importance.
• The i element is text that is offset from the normal text.
• The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.
• This text is deleted and This text is inserted.
• This text has a strikethrough.
• Superscript®.
• Subscript for things like H2O.
• This small text is small for for fine print, etc.
• Abbreviation: HTML
• This text is a short inline quotation.
• This is a citation.
• The dfn element indicates a definition.
• The mark element indicates a highlight.
• The variable element, such as x = y.
• Canvas
• Meter
• Progress

I admit many of these use bold, italics, underline, strikethroughs, etc, but if you’re trying to remove ALL browser defaults, those particular elements are not de-styled. Also, if I remember correctly, the canvas element has a default width and height added by the browser (similar to the iframe element) and doesn’t do much until you activate it with JavaScript.

I hope these help. :)

While trying out destyle I found some left over paddings. They are small but still.

• In the th and td elements

(example page from destyle)

• As well as in the option element

(example page html5-kitchen-sink)

I think it would be a good idea to reset the padding in the universal selector. This way no elements can be missed. Also margin could be reset like this as well, assuming its equally desired to be reset for all elements. This would also deduplicate quite a bit of code, as right now they are reset individually for every element.

I'm happy to put up an PR if this is accepted.

Default table border color is set to gray (tested in Chrome), should be set to inherit or currentColor.

I want to reset default dialog tag styles.

For example, the following styles are the default for latest chrome.

  display: block;
  position: absolute;
  left: 0px;
  right: 0px;
  width: -webkit-fit-content;
  height: -webkit-fit-content;
  color: black;
  margin: auto;
  border-width: initial;
  border-style: solid;
  border-color: initial;
  border-image: initial;
  padding: 1em;
  background: white;

I love this repository.
Thank you.

Hello,

Please have a look at this fiddle in which select[disabled] is not destyled.

Thanks !

Hello,

Here's a simple template containing :

• body (display: flex, flex-direction: column)
  • header
  • main (flex: 1)
  • footer
• destyle.css/destyle.min.css
• brands.css/Discord.css

A scrollbar appears, but disappears when either removing the second stylesheet or adding line-height: normal to body.

Any idea why ?

Thanks

I added menu{margin: 0; padding: 0;} to my code, because I need it.. What do you think, Nicolas?

Hello,

First of all, I love the way of destyling instead of just normalizing, and I'm quite satisfied with your project, thanks.

However, I have an issue with [contenteditable] : it remains styled similarly to input[type=text].

Thanks !

Hi!
I didn't know where else to write, so I decided here. Is there any way I can contact you by mail? There are some suggestions for improvement.

Hi,

Browsers apply minimal width by default on elements, preventing text wrapping and flex containers to behave properly, requiring the developer to add min-width: 0.

https://youtube.com/watch?v=cH8VbLM1958
https://defensivecss.dev/tip/flexbox-min-content-size/
https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

Therefore, it seems it would be a great default for destyle.css to remove these behaviors.

Thanks