Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove color picker borders on Chromium based browsers #37936

Merged
merged 1 commit into from
Feb 15, 2023

Conversation

MewenLeHo
Copy link
Contributor

@MewenLeHo MewenLeHo commented Jan 23, 2023

Description

The PR Update .form-control-color sizing and styles #36156 removes the Firefox-specific border on the swatch of the color picker:

  &::-moz-color-swatch {
    border: 0 !important; // stylelint-disable-line declaration-no-important
    @include border-radius($input-border-radius);
  }

But nothing was made for Chromium based browsers and I don't see why the visual rendering of the color picker should be different on Firefox only.

Motivation & Context

Keep the code consistent between all browsers.

Type of changes

  • Bug fix (non-breaking change which fixes an issue)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed

Live previews

https://deploy-preview-37936--twbs-bootstrap.netlify.app/docs/5.3/forms/form-control/#color

@MewenLeHo MewenLeHo requested a review from a team as a code owner January 23, 2023 14:07
@alecpl
Copy link
Contributor

alecpl commented Jan 27, 2023

Now &::-moz-color-swatch and &::-webkit-color-swatch are the same and could be deduplicated into one rule, to save a few characters.

@MewenLeHo
Copy link
Contributor Author

Now &::-moz-color-swatch and &::-webkit-color-swatch are the same and could be deduplicated into one rule, to save a few characters.

I don't think so. CSS specs states that if a user agent doesn't recognize part of a selector, it has to ignore the whole selector and its block. Namely, since one vendor's browser doesn't understand other vendors' prefixes, it has to drop any rules that contain those unrecognized prefixes.

Firefox is notorious for partially flouting this rule. Therefore it could work on this particular browser but non on Chromium based ones.

That's why Botstrap is keeping distinct rules for different vendors' prefixes, like in _form-control.scss or _form-range.scss for instance.

Copy link
Member

@mdo mdo left a comment

Choose a reason for hiding this comment

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

Confirming for future me, just in case. This is helpful for Chrome only, not Safari.

@mdo mdo merged commit 2b31a6b into twbs:main Feb 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

4 participants