I've created a simple church directory in which I edited the CSS to change one of the default Map Markers to one of my own. The issue that I am having is that the Map marker is displayed correctly on Chrome and Safari but not Firefox IE or Edge.
copticchurch-directory.org
Code
/*
Theme Name: Listify Child
Theme URI: http://astoundify.com/themes/listify
Template: listify
Version: 1.0
*/
.job_listing-rating-wrapper,
.map-marker-info .rating,
.single-comment-rating,
.star-rating-wrapper {
display: none !important;
}
.type-job_listing.style-grid .job_listing-entry-footer {
display: none;
}
.ion-information-circled
{
content: url(http://copticchurch-directory.org/wp-content/uploads/2016/08/Map-Marker1.svg);
}
.ion-ios.information-circled
{
content: url(http://copticchurch-directory.org/wp-content/uploads/2016/08/Map-Marker1.svg);
}
.ion.md.information-circled
{
content: url(http://copticchurch-directory.org/wp-content/uploads/2016/08/Map-Marker1.svg);
}
The problem is with the use of the content property on regular elements. Use instead the background property, which will have better cross-browser support.
Change the following:
.ion-information-circled {
content: url(...);
}
Into this:
.map-marker .ion-information-circled::before {
content: "";
background: url(...)
}
https://jsfiddle.net/eyvetdz4/2/
I'm trying to find a way to apply CSS just to Safari, but everything I find also applies to Chrome. I know these are currently both WebKit browsers, but I'm having problems with div alignments in Chrome and Safari; each displays differently.
I have been trying to use this but it affects Chrome as well:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
Does anyone know of another one that will just apply to Safari?
UPDATED FOR MONTEREY & SAFARI 15 (early 2022 Update) *
PLEASE PLEASE -- If you are having trouble, and really want to get help or help others by posting a comment about it, Post Your Browser and Device (MacBook/IPad/etc... with both browser and OS version numbers!)
Claiming none of these work is not accurate (and actually not even possible.) Many of these are not really 'hacks' but code built into versions of Safari by Apple. More info is needed. I love the fact that you came here, and really want things to work out for you.
If you have issues getting something from here working on your site, please do check the test site via links below -- If a hack is working there, but not on your site, the hack is not the issue - there is something else happening with your site, often just a CSS conflict as mentioned below, or perhaps nothing is working but you may be unaware that you are not actually using Safari at all. Remember that this info is here to help people with (hopefully) short term issues.
The test site:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
AND MIRROR!
https://browserstrangeness.github.io/css_hacks.html#safari
NOTE: Filters and compilers (such as the SASS engine) expect standard 'cross-browser' code -- NOT CSS hacks like these which means they will rewrite, destroy or remove the hacks since that is not what hacks do. Much of this is non-standard code that has been painstakingly crafted to target single browser versions only and cannot work if they are altered. If you wish to use it with those, you must load your chosen CSS hack AFTER any filter or compiler. This may seem like a given but there has been a lot of confusion among people who do not realize that they are undoing a hack by running it through such software which was not designed for this purpose.
Safari has changed since version 6.1, as many have noticed.
Please note: if you are using Chrome [and now also Firefox] on iOS (at least in iOS versions 6.1 and newer) and you wonder why none of the hacks seem to be separating Chrome from Safari, it is because the iOS version of Chrome is using the Safari engine. It uses Safari hacks not the Chrome ones. More about that here: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ Firefox for iOS was released in Fall 2015. It also responds to the Safari Hacks, but none of the Firefox ones, same as iOS Chrome.
ALSO: If you have tried one or more of the hacks and have trouble getting them to work, please post sample code (better yet a test page) - the hack you are attempting, and what browser(s) (exact version!) you are using as well as the device you are using. Without that additional information, it is impossible for me or anyone else here to assist you.
Often it is a simple fix or a missing semicolon. With CSS it is usually that or a problem of which order the code is listed in the style sheets, if not just CSS errors. Please do test the hacks here on the test site. If it works there, that means the hack really is working for your setup, but it is something else that needs to be resolved. People here really do love to help, or at least point you in the right direction.
That out of the way here are hacks for you to use for more recent versions of Safari.
You should try this one first as it covers current Safari versions and is pure-Safari only:
This one still works properly with Safari 13 (early-2020):
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
To cover more versions, 6.1 and up, at this time you have to use the next pair of css hacks. The one for 6.1-10.0 to go with one that handles 10.1 and up.
So then -- here is one I worked out for Safari 10.1+:
The double media query is important here, don't remove it.
/* Safari 10.1+ */
#media not all and (min-resolution:.001dpcm) { #media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Try this one if SCSS or other tool set has trouble with the nested media query:
/* Safari 10.1+ (alternate method) */
#media not all and (min-resolution:.001dpcm)
{ #supports (-webkit-appearance:none) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
This next one works for 6.1-10.0 but not 10.1 (Late March 2017 update)
This hack I created over many months of testing and experimentation by combining multiple other hacks.
NOTES: like above, the double media query is NOT an accident -- it rules out many older browsers that cannot handle media query nesting. -- The missing space after one of the 'and's is important as well. This is after all, a hack... and the only one that works for 6.1 and all newer Safari versions at this time. Also be aware as listed in the comments below, the hack is non-standard css and must be applied AFTER a filter. Filters such as SASS engines will rewrite/undo or completely remove it outright.
As mentioned above, please check my test page to see it working as-is (without modification!)
And here is the code:
/* Safari 6.1-10.0 (not 10.1) */
#media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ #media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
For more 'version specific' Safari CSS, please continue to read below.
/* Safari 11+ */
#media not all and (min-resolution:.001dpcm)
{ #supports (-webkit-appearance:none) and (stroke-color:transparent) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
One for Safari 11.0:
/* Safari 11.0 (not 11.1) */
html >> * .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
One for Safari 10.0:
/* Safari 10.0 (not 10.1) */
_::-webkit-:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Slightly modified works for 10.1 (only):
/* Safari 10.1 */
#media not all and (min-resolution:.001dpcm)
{ #supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Safari 10.0 (Non-iOS Devices):
/* Safari 10.0 (not 10.1) but not on iOS */
_::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9 CSS Hacks:
A simple supports feature query hack for Safari 9.0 and up:
#supports (-webkit-hyphens:none)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
A simple underscore hack for Safari 9.0 and up:
_:not(a,b), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Another one for Safari 9.0 and up:
/* Safari 9+ */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
and another support features query too:
/* Safari 9+, < 13.1 */
#supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
One for Safari 9.0-10.0:
/* Safari 9.0-10.0 (not 10.1) */
_::-webkit-:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9 now includes feature detection so we can use that now...
/* Safari 9 */
#supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Now to target iOS devices only. As mentioned above, since Chrome on iOS is rooted in Safari, it of course hits that one as well.
/* Safari 9.0 (iOS Only) */
#supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
one for Safari 9.0+ but not iOS devices:
/* Safari 9+ (non-iOS) */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
And one for Safari 9.0-10.0 but not iOS devices:
/* Safari 9.0-10.0 (not 10.1) (non-iOS) */
_:-webkit-full-screen:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Below are hacks that separate 6.1-7.0, and 7.1+
These also required a combination of multiple hacks in order to get the right result:
/* Safari 6.1-7.0 */
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{
.safari_only {(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
Since I have pointed out the way to block iOS devices, here is the modified version of Safari 6.1+ hack that targets non-iOS devices:
/* Safari 6.1-10.0 (not 10.1) (non-iOS) */
#media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ #media {
_:-webkit-full-screen, .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
To use them:
<div class="safari_only">This text will be Blue in Safari</div>
Usually [like in this question] the reason people ask about Safari hacks is
mostly in reference to separating it from Google Chrome (again NOT iOS!)
It may be important to post the alternative: how to target Chrome separately
from Safari as well, so I am providing that for you here in case it is needed.
Here are the basics, again check my test page for lots of specific versions of Chrome, but these cover Chrome in general. Chrome is version 45, Dev and Canary versions are up to version 47 at this time.
My old media query combo I put on browserhacks still works just for Chrome 29+:
/* Chrome 29+ */
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
An #supports feature query works well for Chrome 29+ as well... a modified version of the one we were using for Chrome 28+ below. Safari 9, the coming Firefox browsers, and the Microsoft Edge browser are not picked up with this one:
/* Chrome 29+ */
#supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Previously, Chrome 28 and newer were easy to target. This is one I sent to browserhacks after seeing it included within a block of other CSS code (not originally intended as a CSS hack) and realized what it does, so I extracted the relevant portion for our purposes:
[ NOTE: ] This older method below now pics up Safari 9 and the Microsoft Edge browser without the above update. The coming versions of Firefox and Microsoft Edge have added support for multiple -webkit- CSS codes in their programming, and both Edge and Safari 9 have added support for #supports feature detection. Chrome and Firefox included #supports previously.
/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */
#supports (-webkit-appearance:none)
{
.chrome_and_safari {
color:#0000FF;
background-color:#CCCCCC;
}
}
The block of Chrome versions 22-28 (If needed to support older versions) are also possible to target with a twist on my Safari combo hacks I posted above:
/* Chrome 22-28 */
#media screen and(-webkit-min-device-pixel-ratio:0)
{
.chrome_only {-chrome-:only(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
NOTE: If you are new, change class name but leave this the same-> {-chrome-:only(;
Like the Safari CSS formatting hacks above, these can be used as follows:
<div class="chrome_only">This text will be Blue in Chrome</div>
So you don't have to search for it in this post, here is my live test page again:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
[Or the Mirror]
https://browserstrangeness.github.io/css_hacks.html#safari
The test page has many others as well, specifically version-based to further
help you differentiate between Chrome and Safari, and also many hacks for Firefox, Microsoft Edge, and Internet Explorer web browsers.
NOTE: If something doesn't work for you, check the test page first, but provide example code and WHICH hack you are attempting for anyone to assist you.
There is a way to filter Safari 5+ from Chrome:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass {
color:red;
}
/* Safari only override */
::i-block-chrome,.myClass {
color:blue;
}
}
Sarari Only
.yourClass:not(:root:root){
/* ^_^ */
}
This hack 100% work only for safari 5.1-6.0. I've just tested it with success.
#media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .yourcssrule {
your css property
}
}
For those who want to implement a hack for Safari 7.0 and below, but not 7.1 and above -- use:
.myclass { (;property: value;); }
.myclass { [;property: value;]; }
Replace your class in (.myClass)
/* Safari only */
.myClass:not(:root:root) {
enter code here
}
When using this safari-only filter I could target Safari (iOS and Mac), but exclude Chrome (and other browsers):
#supports (-webkit-backdrop-filter: blur(1px)) {
.safari-only {
background-color: rgb(76,80,84);
}
}
I like to use the following method:
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) {
$('head').append('<link rel="stylesheet" type="text/css" href="path/to/safari.css">')
};
By the way, for any of you guys that just need to target Safari on mobiles, just add a media query to this hack:
#media screen and (max-width: 767px) {
_::-webkit-full-page-media, _:future, :root .safari_only {
padding: 10px; //or any property you need
}
}
And don't forget to add the .safari_only class to the element you want to target, example:
<div class='safari_only'> This div will have a padding:10px in a mobile with Safari </div>
This works:
#media not all and (min-resolution:.001dpcm) {
#media {
/* your code for Safari Desktop & Mobile */
body {
background-color: red;
color: blue;
}
/* end */
}
}
Note: If iOS-only is sufficient (if you're willing to sacrifice Safari desktop), then this works:
#supports (-webkit-overflow-scrolling: touch) {
/* CSS specific to iOS devices */
}
hi i ve made this and it worked for me
#media(max-width: 1920px){
#media not all and (min-resolution:.001dpcm) {
.photo_row2 {
margin-left: 5.5% !important;
}
}
}
#media(max-width: 1680px){
#media not all and (min-resolution:.001dpcm) {
.photo_row2 {
margin-left: 15% !important;
}
}
}
#media(max-width: 1600px){
#media not all and (min-resolution:.001dpcm) {
.photo_row2 {
margin-left: 18% !important;
}
}
}
#media (max-width: 1440px) {
#media not all and (min-resolution:.001dpcm) {
.photo_row2 {
margin-left: 24.5% !important;
}
}
}
#media (max-width: 1024px) {
#media not all and (min-resolution:.001dpcm) {
#media {
.photo_row2 {
margin-left: -11% !important;
}
}
}
Works on iOS 16 and macOS Ventura:
#supports (font: -apple-system-body) and (-webkit-appearance: none) {
.body {
background-color: red;
}
}
https://www.bram.us/2021/06/23/css-at-supports-rules-to-target-only-firefox-safari-chromium/#safari
#supports (background: -webkit-named-image(i)) {
//
}
h1::after {
content: "No";
margin-left: .3em;
color: red;
}
#supports (background: -webkit-named-image(i)) {
h1::after {
content: "Yes";
color: green;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Safari?</h1>
</body>
</html>
Step 1: use https://modernizr.com/
Step 2: use the html class .regions to select only Safari
a { color: blue; }
html.regions a { color: green; }
Modernizr will add html classes to the DOM based on what the current browser supports. Safari supports regions http://caniuse.com/#feat=css-regions whereas other browsers do not (yet anyway). This method is also very effective in selecting different versions of IE. May the force be with you.
You can use a media-query hack to select Safari 6.1-7.0 from other browsers.
#media \\0 screen {}
Disclaimer: This hack also targets old Chrome versions (before July 2013).
At the end I use a little JavaScript to achieve it:
if (navigator.vendor.startsWith('Apple'))
document.documentElement.classList.add('on-apple');
then in my CSS to target Apple browser engine the selector will be:
.on-apple .my-class{
...
}
If you are looking Safari specific browser hack
I tried this, and it's working for me (only for Safari)
#supports (-webkit-hyphens:none){
#content
}
#media not all and (min-resolution:.001dpcm)
{ #supports (-webkit-appearance:none) and (stroke-color:transparent) {
#content
}
}
It working 100% in safari..i tried
#media screen and (-webkit-min-device-pixel-ratio:0)
{
::i-block-chrome, Class Name {your styles}
}
I have tested and it worked for me
#media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .myClass {
height: 1070px !important;
}
}
Bootstrap v2.3.1 - less placeholder styles working on chrome but not working on Mozilla latest version
Please help
Less code here
.placeholder(red);
Mozilla Updated Syntax
In the version 19.0 release notes, it states it changed the -moz-placeholder from being a pseudoclass (:-moz-placeholder) to a pseudoelement (::-moz-placeholder, note the double colons) which was implementing this bug fix. Apparently it was not made backwards compatible, because the double-colon syntax works in this fiddle but the single colon syntax does not.
However, Bootstrap at present (6-6-2013) has the pseudoclass (single colon) version in its mixin (line 83 as of this writing). So you need to either go in an manually fix the mixins.less file of bootstrap to correct it to the new syntax (not my first choice), or create your own override mixin to also add the new syntax, like so (better choice):
.placeholder(#color: #placeholderText) {
&::-moz-placeholder {
color: #color;
}
}
Once bootstrap is updated to version 3, then you can get rid of your override mixin.
change mixins file
// Placeholder text
// -------------------------
.placeholder(#color: #placeholderText) {
&:-moz-placeholder {
color: #color;
}
&:-ms-input-placeholder {
color: #color;
}
&::-webkit-input-placeholder {
color: #color;
}
&::-moz-placeholder { // this for latest mozilla
color: #color;
}
}
<style>
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}
<style>
<input type="email" placeholder="anytext">
I have tried to auto resize the image using the CSS property max-width, but it does't work in IE7 and IE8. Is there any way to auto resize the image with pure CSS in IE7 and IE8?
Use width: inherit; to make it work with pure CSS in IE8.
(See responsive-base.css.) Like this:
img {
width: inherit; /* This makes the next two lines work in IE8. */
max-width: 100%; /* Add !important if needed. */
height: auto; /* Add !important if needed. */
}
I'm not sure if that works in IE7—please test it and let us know if you're testing IE7. Before I figured out the width: inherit technique I was using the jQuery below, so you could try it if you really need support down to IE7 and the first technique doesn't work:
<!--[if lt IE 9]><script>
jQuery(function($) {
$('img').each(function(){
// .removeAttr supports SSVs in jQuery 1.7+
$(this).removeAttr('width height');
});
});
</script><![endif]-->
Try something like this:
width: expression(document.body.clientWidth > 800 ? "800px" : "auto" );
/* If page is wider than 800px then set width to 800px, otherwise set to auto */
Source (worth taking a look at)
You need a one-time cached expression for IE 6-7.
IMG {
zoom:expression(
function(t){
t.runtimeStyle.zoom = 1;
var maxW = parseInt(t.currentStyle['max-width'], 10);
var maxH = parseInt(t.currentStyle['max-height'], 10);
if (t.scrollWidth > maxW && t.scrollWidth >= t.scrollHeight) {
t.style.width = maxW;
} else if (t.scrollHeight > maxH) {
t.style.height = maxH;
}
}(this)
);
}
Example: http://kizu.ru/lib/ie/minmax.html
JS source file: http://kizu.ru/lib/ie/ie.js
Author: Roman Komarov
Doesn't IE 7&8 recognise the following:
#my-div img
{
max-width:100%;
_max-width:100%;
}
Most web-developers know that IE has fallen behind in the race for standards and being able to show the latest and greatest. Many CSS2 properties are unsupported. Some of the more useful ones, are properties such as max-width, max-height, min-width and finally min-height.
Try this:
<html>
<style>
p {
border:1px solid red;
width:expression(
document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"30em":
"auto" );
}
</style>
<body>
<p>
[alot of text]
</p>
Use max-width: 100% with height:auto, plus width:auto for IE8:
img
{
max-width: 100%;
height: auto;
}
/* Media Query to filter IE8 */
#media \0screen
{
img
{
width: auto;
}
}
As you also want support for media queries..You can use the following polyfill to add support for media queries to IE6-IE8
https://github.com/scottjehl/Respond (very small in size, just 1-2kb minified and gzipped)
then use the following css:
#media screen and (min-width: 480px){
img{
max-width: 100%;
height: auto;
}
}
I tested it and working for every browser
img{
height: auto;
max-width: 100%;
}