Is there a way to override a css for only Safari browser?
I am using Safari version 15.1 but looking to be able to target any version.
Tried the following via codepen. But it does not override in Safari.
.myClass {
background-color: grey;
color: red;
width: 2000px;
height: 50px;
}
#media not all and (min-resolution:.001dpcm)
{ #supports (-webkit-appearance:none) {
.safari_only {
.myClass {
background-color: yellow;
color: green;
width: 2000px;
height: 50px;
}
}
}}
<html>
<body>
<div class="myClass">
Sample 1
</div>
</body>
</html>
Seen examples such as following explaining safari overrides.
But these are not overriding a css class.
is there a css hack for safari only NOT chrome?
How do I add a css line ONLY for Safari
CSS hack for Safari ONLY
https://solvit.io/bcf61b6
-webkit-appearance is (luckily or not) also supported by Firefox and Edge as mentioned in the mozilla documentation.
Only thing I can imagine to work is to use JavaScript to target the user agent:
function detectBrowser() {
if (navigator.userAgent.includes("Safari")) {
// your code here
}
}
Related
This question already has answers here:
How to detect Safari, Chrome, IE, Firefox and Opera browsers?
(30 answers)
Closed 3 years ago.
Using one style sheet I want to achieve kind of cross platform rules.
I will show you quite easy example to explain exactly what I want.
I have two div elements like that:
<div class="outer">
<div class="inner">
</div>
</div>
And some simple styles to them:
div.outer {
background-color: red;
width: 200px;
height: 200px;
}
div.inner {
height: 100px;
width: 100px;
background-color: blue;
}
Now I want to override background color of one of them, for example inner, with the other color based on the browser I'm using. For example if I open this by Chrome I want this color to be green, and when I open it with IE I want it to be blue.
I have an idea how to do this (instead of other style sheets for each browser), but it doesn't work this way:
#media screen {
.chrome .inner {
background-color: green !important;
}
}
Do you know how to do that guys?
check this
it will give you complete cross browser identification
when you get browser info then just custom you style
Hope it will help you Happy coding!
There are ways to achieve certain effects like this only with CSS & HTML, but this will only target some of the major browsers.. I wouldn't recommend it.
Here's an example:
/* style for all browsers (think Google & Safari/Webkit): */
p {
background-color: blue;
}
/* overrule for Firefox: */
#-moz-document url-prefix() {
p {
background-color: gold;
}
}
And then in your HTML for IE:
<!--[if IE]>
<style>
p {
background-color: purple;
}
</style>
<![endif]-->
This question already has answers here:
How to apply specific CSS rules to Chrome only?
(13 answers)
Closed 5 months ago.
For some reason Chrome shows this span unusually higher than Firefox.
As a result, I wrote the following CSS:
#media screen and (-webkit-min-device-pixel-ratio: 0) {
.selector:not(*:root),
span.justForChrome {
display: block;
margin-top: 23%;
text-align: right;
}
}
The following is the HTML:
<li class="nav-item">
<a
class="nav-link"
data-toggle="tooltip"
title="Shopping cart"
id="{{ shoppingCart }}"
routerLink="/shopping-cart"
><span class="justForChrome"
>Shopping Cart<span id="counter">{{ counter }}</span></span
></a
>
</li>
While this is working in Chrome, now Firefox is showing the span to high. If I set the margin-top to 100% in Firefox developer tools, then it is perfect, but margin-top at 100% on Chrome sends the span upwards.
What can I do? I swear this was working a few weeks ago. I would expect that Firefox would not even find the span.justForChrome selector rule in the CSS
Migrating OP's solution from the question to an answer:
Whether it is the fact that I have to compile the Angular app, which
creates a new "bundled" stylesheet or if it is because I placed the
media queries at the end of the scss file, I do not know, but here are
the media queries that I used at the end of the scss file, which
worked:
#media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
.selector:not(*:root),
span.justForChrome {
display: block;
margin-top: 23%;
text-align: right;
}
}
#-moz-document url-prefix() {
span.justForChrome {
display: block;
margin-top: 94px !important;
text-align: right;
}
}
Currently the site is still in beta, but here is a screenshot:
Both the words "Shopping Cart" and the number are on the "baseline" of
the navbar.
I've tested the following code in Microsoft Edge 42.17134.1.0, Firefox 65.0 (64-bit), and Chrome Version 72.0.3626.81 (Official Build) (64-bit) and it works as expected in Chrome.
#media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.selector:not(*:root), .chrome {
color: green;
}
}
Note that .chrome is a class name and you can change with other class names.
Check the following JsFiddle or snippet:
.test {color:red;}
#media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.selector:not(*:root), .chrome {
color: green;
}
}
<p class="test chrome">I Should be Green if you're in chrome, Red in all other browsers</p>
How can i change this for one browser while having it differently for another??
h2 {
font-size: 150%;
color: red;
}
Thanks. like making it blue or 175% on another
The part of solution by dude below.
#-moz-document url-prefix() {
h2 {
font-size: 150%;
color: red;
}
}
See it here
See other Firefox specific css extensions here
Simple writeup on 'Tricks' here
Edit
About other browsers: You can find a lof of useful browser-specific CSS 'hacks' on browserhacks.com
On wiki page of text-angular github project, it says:
https://github.com/fraywing/textAngular/wiki/Styling-the-Editor
I tried with this code:
<div text-angular="text-angular" ta-toolbar="[]" ng-model="message"
placeholder="<div class='placeholder'>Write Coment...</div>"></div>
But the screen will show as:
placeholder show as raw html
I tried the following after taking a look at this website: https://css-tricks.com/almanac/selectors/p/placeholder/
::-webkit-input-placeholder { color: red; }
It still didn't work. How can I give custom styles to my input placeholder?
placeholders should be used with input elements and not on divs. You'd probably have to change your div tags to inputs.
You had the right idea about styling a placeholder, but you may need to adjust the vendor prefixes depending on your browser
Chrome, Safari, Opera, Edge): ::-webkit-input-placeholder
Firefox 4 through 18: :-moz-placeholder (Only one colon)
Firefox 19+: ::-moz-placeholder (two colons)
IE 10 and IE 11 :-ms-input-placeholder
/* Chrome, Safari, Opera and Edge */
::-webkit-input-placeholder { color: red; }
/* Firefox 4 through 18 */
:-moz-input-placeholder { color: red; }
/* Firefox 19+ */
::-moz-input-placeholder { color: red; }
/* IE10 and IE11 */
:-ms-input-placeholder { color: red; }
<input placeholder="Content here" />
Another thing you could try is to attach a contenteditable property to your div which will make it behave kind of like an input element. You can then set a data property to simulate the behavior of a placeholder.
Use the before pseudo selector which will target the div only when it's empty and not focused on.
[contenteditable=true]:empty:not(:focus):before{
content:attr(data-text);
color: red;
}
div {
border: 1px solid black;
}
<div contenteditable="true" data-text="Enter text here"></div>
I found a way myself.. To let the Answer part standing out to other similar questions, I choose to post answer here instead of editing original question.
Use .placeholder-text class. It's not a customized class but it's the temporary class used by text-angular when it is displaying placeholder.
.ta-bind {
&.placeholder-text {
color: red;
}
&:not(.placeholder-text) {
color: black;
}
}
( Example is in scss, remember to covert if you are using css)
I'm using the following HTML and CSS to create elements which are tightly together in a 100% space (floating?).
<div class="wrapper">
<div class="image">This is image</div>
<div class="content">This is content</div>
</div>
.wrapper {
font-size: 0;
}
.image, .content {
display: inline-block;
box-sizing: border-box;
width: 50%;
color: #000;
font-size: 18px;
}
.image {
background: #f6f6f6;
}
JSFiddle.
Endresult: Chrome top, Safari for Windows bottom
This style works great on all browsers - except Safari for Windows. I'm not sure about the "real" Safari but my iPad seems to work fine. Is this an issue I should be worried about?
In Safari for Windows, setting the width to:
width: 49.7%;
will give the result you are looking for.
You can detect the browser and then apply the style just to Safari for Windows.
See here for how to detect Safari for Windows:
Detection for Safari Windows with Javascript