Skip to content

Commit

Permalink
More explicitly define font resets on form controls (#607)
Browse files Browse the repository at this point in the history
  • Loading branch information
Jonathan Neal authored Aug 8, 2016
1 parent db6567c commit 5d728b8
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 12 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
* Move unsorted rules into their respective sections.
* Update the `summary` style in all browsers.
* Remove `::placeholder` styles due to a bug in Edge.
* More explicitly define font resets on form controls
* Remove the `optgroup` normalization needed by the previous font reset

### 4.2.0 (June 30, 2016)

Expand Down
14 changes: 4 additions & 10 deletions normalize.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@ svg:not(:root) {
========================================================================== */

/**
* 1. Change font properties to `inherit` in all browsers (opinionated).
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/

Expand All @@ -253,18 +253,12 @@ input,
optgroup,
select,
textarea {
font: inherit; /* 1 */
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}

/**
* Restore the font weight unset by the previous rule.
*/

optgroup {
font-weight: bold;
}

/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
Expand Down
4 changes: 2 additions & 2 deletions test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,8 +259,8 @@ <h3 class="Test-it">should have a <code>content-box</code> box model</h3>
</div>

<h2 class="Test-describe"><code>button</code>, <code>input</code>, <code>optgroup</code>, <code>select</code>, <code>textarea</code></h2>
<h3 class="Test-it">should inherit <code>font</code> from ancestor</h3>
<div class="Test-run" style="font:bold italic 20px/1 serif;">
<h3 class="Test-it">should inherit <code>font-size</code> from ancestor</h3>
<div class="Test-run" style="font-size: 20px;">
<button>button</button><br>
<input value="input"><br>
<select style="border:1px solid #999;">
Expand Down

5 comments on commit 5d728b8

@rafhun
Copy link

@rafhun rafhun commented on 5d728b8 Oct 10, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can I ask what the reason behind the more explicit font definitions is? Thing is, that I usually set a base font-family, font-size and line-height on the body tag, which usually do apply to input elements as well. This leads to me basically just adding the old rule back into my styles, overriding the one set here again which does not make too much sense in my mind. That is why I would be grateful to understand the reasoning behind this decision.

@Florian-R
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rafhun See #591 and #607

@jovilog
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The font-family should stay inherit IMO.

@MethodGrab
Copy link

@MethodGrab MethodGrab commented on 5d728b8 Oct 19, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, the input font-family should be inherit.

Since its set to sans-serif on html anyway (#591 (comment)), wouldn't using font-family: inherit on input just inherit the font-family: sans-serif from the html while still allowing the user to override it by just specifying a font-family on html or body and not having to explicitly specify the font-family for input?

@battaglr
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rafhun, @jovilog, @MethodGrab, as @Florian-R pointed out, you can see the reasons behind this decision on #591 and #607. If you consider that we should reconsider this, please, open an issue or comment in the original issues, so we can track this. Comments on commits are hard to track. Thanks!

Please sign in to comment.