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

Add a browser-specific partial for specific partials #1

Open
perpetual-education-personal opened this issue Mar 30, 2022 · 2 comments
Labels
good first issue Good for newcomers

Comments

@perpetual-education-personal
Copy link
Owner

For example:

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color

is for Apple only. On phones there a "blinky" quick gray active/hover like thing on 'tap' / and probably click. While it's trying to be helpful / it makes things feel broken. So, we can manually add :active states - instead.

maybe there's a browser-specific CSS file / and it imports safari` or something.

@prolixmagus
Copy link
Contributor

After some research...

  • Older strategies like "browser sniffing" or creating css based on browser is not recommended, due to potentially locking out future users if the browser updates, or having to go back into the code base and change everything if the browser updates.
  • Targeting browsers based on features seems to be the way to go. You can use @supports query, but IE doesn't support that ... of course. And you would have to know what each browser supports or doesn't support, or you'd err on wrapping everything ... which is a pain.

I found this build tool: Modernizr

You can use it with CSS or Javascript. It requires JS though to run tests ... but it auto-detects if a feature is true or false, and then gives you standard class patterns to use. Might not be cool if you want to control the classes more.

@perpetual-education-personal
Copy link
Owner Author

^^ These things are true!!!
And you can use Modernizr -- and Autoprefixr to adjust to some things.

But I think what we're talking about here are outside of that. (see safari example above)

Maybe it doesn't need to be added based on the user-agent/browser --- but as far as organizing internally -- we can have it in a seperate file for UI with a note about it being safari specific or something?

And we can just keep this in mind as we go --

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

2 participants