If opera - something different in css? - javascript

Is there any way that I can override something in css and use different size if user/visitor uses opera?
Example, in chrome, ff and safari this works great:
.section#search h3 a {
background: url("../img/search.png") no-repeat 0 50%;
padding: 0 0 0 25px;
position: relative;
}
But in Opera padding is not really good... I need to add top: 16px; into it or to change padding to padding: 0 0 36px 25px;
Is there any "hack" like for IE or maybe javascript usage? No ideas...
All I need is to add that top or new padding just for opera. Thanks ;)

With the conditional-css tool, you can target opera, but engine is important. conditional-css.com explains:
Conditional-CSS isn't really all that interested in which browser the
user is using, but rather what rendering engine the user's browser
utilises. This is why Conditional-CSS uses 'Gecko' rather than the
well known Firefox as one of it's browser conditions. Likewise for
Safari 'Webkit' is used. This allows other browsers using the same
rendering engines to receive the same targeted CSS. An exception to
this rule is made for IE (rather than using 'Trident') since this is
what the IE conditional comments use and Trident isn't particuarly
well known. Similarly for Opera, since only the Opera browser uses
it's Presto rendering engine, 'Opera' is used.
http://www.conditional-css.com/advanced
they write that a conditional tag is formed like:
[if {!} browser]
[if {!} browser version]
[if {!} condition browser version]
and that browser names are as follows:
IE - Internet Explorer
Gecko - Gecko based browsers (Firefox, Camino etc)
Webkit - Webkit based browsers (Safari, Shiira etc)
'SafMob' - Mobile Safari (iPhone / iPod Touch)
Opera - Opera's browser
IEMac - Internet Explorer for the Mac
Konq - Konqueror
IEmob - IE mobile
PSP - Playstation Portable
NetF - Net Front
So it should logically follow, according to them, that you can target via:
[if Opera]
like this in a CSS block:
[if Opera] .box {
width: 500px;
padding: 100px 0;
}
or like this for a CSS include:
<!--[if Opera]>
<![endif]-->

You can use a JavaScript library like Modernizr to test for browsers and use the css classes it adds to target Opera specifically.

Before you plan to use work-arounds and hacks, consider the following:
Is your page in strict mode? If not, add a doctype to the very first line of the page:
<!DOCTYPE html>
Otherwise, your page is in quirks mode, and it's the main cause of inconsistencies across browsers.
Try using a CSS reset. This should iron out little inconsistencies across browsers like paddings, margins, alignments and more. Load this style before any other styles.

what versions and types of opera? you can use this media query
#media not all and (-webkit-min-device-pixel-ratio:0) { }
to target opera 10, 10.5,11, and 11.6
check it out here: note, i only viewed in chrome19 and opera 11.6 http://jsfiddle.net/jalbertbowdenii/fw94a/
better
x:-o-prefocus, p{}
http://jsfiddle.net/jalbertbowdenii/6pRPC/

Related

CSS media query display-mode: fullscreen does not work on safari

CSS media query display-mode:fullscreen does not work on safari (the css inside the media query never gets applied). Current safari version: Version 14.1.
#media all and (display-mode: fullscreen) {
...
}
Full example here: https://jsfiddle.net/gnbcv6em/3/
It works on chrome but not safari. I've tried triggering fullscreen with the browser's fullscreen keyboard shortcut or by triggering it manually with js, but neither works on safari.
Also, https://developer.mozilla.org/en-US/docs/Web/CSS/#media/display-mode shows that safari supports it.
Perhaps someone has come across this issue and can help?
Faced with the same issue. Solved by this:
body:-webkit-full-screen .selector {
display: none;
}
And SCSS version (if you have nested selectors):
#at-root body:-webkit-full-screen & {
display: none;
}
At this moment Safari doesn't support :fullscreen selector, so need to use :-webkit-full-screen.

document.documentElement.style.setProperty('--some-color', 'green') does not work in IE

I have a custom css variable declared in a separate css file in a selector.
.ui-grid-row:nth-child(odd) {
background-color: var(--altbg-color) !important;
}
This is not a root element. So not sure how css-vars-ponyfill will work in this case. I have tried that too but could not make it work. (I would be grateful if somebody can help me make it work.)
I am trying to set value to the variable through javascript (I am using AngularJS 1.3) using
document.documentElement.style.setProperty('--some-color', 'green')
which works fine with Chrome & Firefox but not in IE(11).
Does anybody have a solution?
Thanks in advance.
It is not supported in IE 11.
You can only use CSS variables from IE edge 16 and above. However, it's partially supported in IE 15.
In Edge 15, nested calculations with css variables are not computed and are ignored see bug
In Edge 15 animations with css variables may cause the webpage to crash see bug
In Edge 15 is not possible to use css variables in pseudo elements see bug
Though, there's a polyfill for this:
https://www.npmjs.com/package/css-vars-ponyfill
This doesn't support IE edge 11. It starts supporting IE edge 12+. And without edge, it starts supporting from IE 9.
IE Edge Chrome Firefox Safari
----------------------------------
9+ 12+ 19+ 6+ 6+
There is a polyfill, which enables almost complete support for CSS variables in IE11, including JS-integration:
https://github.com/nuxodin/ie11CustomProperties
(i am the author)
The script makes use of the fact that IE has minimal custom properties support where properties can be defined and read out with the cascade in mind.
.myEl {-ie-test:'aaa'} // only one dash allowed! "-"
then read it in javascript:
getComputedStyle( querySelector('.myEl') )['-ie-test']
Demo:
https://rawcdn.githack.com/nuxodin/ie11CustomProperties/ed6a269145661bfc6a43a5b69f06248fa760e766/demo.html

How to use scrollTop prop in Safari

Looking in this site I see in the browser compatibility section, it looks like this
What does that mean? What do I have to do to use that property in safari?
If I go element.scrollTop, that works just like that?
Webkit is the browser engine used by Safari and Chrome, the mentioned item in MDN it's only to clarify that all versions in Safari that use webkit (since like forever) support the property perfectly.
Nothing to worry about, just use it wisely as you would with any other modern browser

Test for background-blend-mode support that correctly targets iOS Safari and Chrome?

I am having a frustrating issue with using CSS background-blend-mode in a way that gracefully degrades everywhere; specifically, Safari and Chrome on iOS seem to evade my efforts to test them for support.
As of this writing, background-blend-mode (at least in basic form) is supported in the latest version of most browsers except IE (see: http://caniuse.com/#feat=css-backgroundblendmode). I am using it to blend a solid background color with a grayscale texture, like so:
.banner-inner {
background-image: url("../img/banner-bg-texture.png");
background-color: #7692b4;
background-blend-mode: overlay;
}
Background-blend-mode is designed to degrade so that if it's not supported in a browser, that browser just sees the normal background-image. However, I want to specifically target those unsupporting browsers so that they only see the solid color, like so:
.no-background-blend-mode .banner-inner {
background: #7692b4; // If no blend-mode support, fall back to solid color
}
CSS Tricks and others suggest a JavaScript-based test for support of this property, which I'm using like so:
// Test for background-blend-mode support
;(function(window) {
document.addEventListener("DOMContentLoaded", function() {
var supportsBackgroundBlendMode = window.getComputedStyle(document.body).backgroundBlendMode;
if(typeof supportsBackgroundBlendMode === "undefined") {
document.documentElement.className += " no-background-blend-mode";
}
}, false);
})(window);
This works fine for targeting IE, which gets the proper .no-background-blend-mode class. Chrome, Firefox and Safari on desktop all support the blend-mode just fine.
Here's the problem: I'm looking at both Safari and Chrome on iOS 8.3, and they both pass the test (typeof supportsBackgroundBlendMode returns "normal") but fail to implement the blend mode. (They both show the grayscale background-image alone, rather than a blend).
Can anyone help me understand what's going on here, and/or help me find a way to test & target these browsers for this feature, that actually works? Thank you!
Update: Still haven't found a good solution for this issue, which persists into iOS 8.4.1 (most current as of this edit).

JS library to simulate Internet Explorer?

There are some JS library to simulate the IE in Webkit? For instance: IE8 doesn't support border-radius currently (maybe on IE10). So I run a JS library that check if I'm using the border-radius then remove it to make similar to IE vision.
It's a crazy idea, I know, but work on IE is too slow, and if I can simulate it on Webkit, will be great! I need do it to an own project too.
Note: I know that exists a Chrome extension to make a IE tab, but the proposal is different: I need run on Webkit, but eliminating features not supported on IE.
Edit1: I'm working on a Webkit based IDE to developer HTML templates. Basically I need a button that emulate the IE view version without need a IE installed too (Mac, Linux for instance). Will be interesting have a Mozilla emulator too, for instance. Basically I will generate a CSS file to each browser too. For instance: -webkit properties not will be included to MSIE CSS. filter not will be included in Webkit CSS (but can be emulated).
So, I'll make a copy of current HTML page before apply a JS method that will edit or delete the unsupported content, make it similar to IE. If IE8 not support border-radius, it'll be removed and I'll see basically an IE version of page. If Mozilla not support -webkit-box-sizing it will be renamed to -moz-box-sizing if disponible.
I know of no script, and frankly I don't expect to see one any time soon as the task of re-creating the topography of IE's support for CSS in various versions of the browser would be a massive undertaking. It would further complicate things if the undocumented hacks like _height were supported too.
Frankly, the best way to test your site in IE8 is to use IE8+. In versions IE8 and up Microsoft introduced Browser Emulation, permitting you to fallback and emulate any number of IE versions all from a single browser - I use this daily, and it's a fantastic feature.
Within IE, open up the Developer Tools by pressing F12 and from there you can change the Browser Mode to IE8. No refresh will be necessary as the browser will handle that on its own. Using this method you can quickly test versions 7 through 10 (assuming you're testing from IE10) with the click of a button.
Disabling CSS3
If all you would like to do is disable CSS3 features, you can use the Strip Tease bookmarklet. It's not a fully-developed solution, so keep in mind that it won't handle things like advanced selectors, etc.

Categories