Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

mejiaj
Copy link
Contributor

@mejiaj mejiaj commented Apr 21, 2023

Summary

Font-smoothing is deprecated. Older technique, no longer applies, for improved font rendering on dark backgrounds.

Breaking change

This is not a breaking change.

Related issue

Closes #5180.

Related pull requests

Site changelog and style updates

Need to update documentation.

Preview link

Preview link: Buttons

Problem statement

  1. Font smoothing is an older non-standard technique that's no longer recommended, see MDN.
  2. We should remove support for this feature as it no longer applies & we're moving away from legacy browser support.
  3. This is an opportunity to remove code that no longer applies and stay closer to modern web standards.

Solution

  1. Moved mixins (add-knockout-font-smoothing & no-knockout-font-smoothing) to _deprecated.scss
  2. Replaced previous styles with warning via @warn - Warning: Font smoothing was deprecated in USWDS 3.5.0. Please remove any references to it.
  3. Removed any use of mixins in SASS
Warning user receives
Warning: Font smoothing was deprecated in USWDS 3.5.0. Please remove any references to it.
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss 38:3  no-knockout-font-smoothing()
    css/custom-styles/_site-header.scss 324:5                                       @import
    css/_uswds-theme-custom-styles.scss 5:9                                         @import
    css/uswds-custom.scss 12:9                                                      root stylesheet

Warning: Font smoothing was deprecated in USWDS 3.5.0. Please remove any references to it.
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss 34:3  add-knockout-font-smoothing()
    css/_uswds-theme-custom-styles.scss 1476:3                                      @import
    css/uswds-custom.scss 12:9                                                      root stylesheet

Warning: Font smoothing was deprecated in USWDS 3.5.0. Please remove any references to it.
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss 34:3  add-knockout-font-smoothing()
    css/_uswds-theme-custom-styles.scss 1572:3                                      @import
    css/uswds-custom.scss 12:9                                                      root stylesheet

Warning: Font smoothing was deprecated in USWDS 3.5.0. Please remove any references to it.
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss 34:3  add-knockout-font-smoothing()
    css/_uswds-theme-custom-styles.scss 1701:3                                      @import
    css/uswds-custom.scss 12:9                                                      root stylesheet

Warning: Font smoothing was deprecated in USWDS 3.5.0. Please remove any references to it.
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/_deprecated.scss 34:3  add-knockout-font-smoothing()
    css/_uswds-theme-custom-styles.scss 1902:5                                      @import
    css/uswds-custom.scss 12:9        

Components that used this feature:

  • usa-dark-background
  • @mixin button-disabled
  • @mixin button-unstyled

Testing and review

  1. There shouldn't be any mention of add-knockout-font-smoothing & no-knockout-font-smoothing in SASS (except in deprecated file).
  2. Calling the mixins will result in a SASS warning.

  • Run git pull origin [base branch] to pull in the most recent updates from your base and check for merge conflicts. (Often, the base branch is develop).
  • Run npm run prettier:scss to format any Sass updates.

@mejiaj mejiaj marked this pull request as ready for review April 24, 2023 16:57
Copy link
Contributor

@mahoneycm mahoneycm left a comment

Choose a reason for hiding this comment

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

No references of font smoothing outside of deprecated have been found & warnings work as expected 👍

Copy link
Contributor

@amyleadem amyleadem left a comment

Choose a reason for hiding this comment

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

  • Confirmed that informative warnings appear when knockout mixins are used
  • Confirmed that all references to no-knockout-font-smoothing and add-knockout-font-smoothing mixins have been removed (outside of deprecated.scss)
  • Confirmed readability of affected type when font-smoothing is removed
    • Note: there is a visual difference in OSX. I am no type expert and am not suggesting that this is necessarily a problem, I just wanted to flag the difference. Quick googling seems to suggest that the best display is the default browser display.

image

Comment on lines +30 to +39
$font-smoothing-warning: "Font smoothing was deprecated in USWDS 3.5.0. Please remove any references to it.";

// Deprecated in 3.5.0
@mixin add-knockout-font-smoothing {
@warn $font-smoothing-warning;
}

@mixin no-knockout-font-smoothing {
@warn $font-smoothing-warning;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks for remembering this

Copy link
Contributor

@thisisdano thisisdano left a comment

Choose a reason for hiding this comment

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

Nice work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

USWDS - Feature: Remove font smoothing

4 participants