We Keep Coding

How can I recognize Safari version in javascript? [duplicate]

This question already has answers here:
How can you detect the version of a browser?
(34 answers)
Closed 6 years ago.
Can I someone recognize version of Safari browser in js or jQuery? I am not looking for webkit version but for version of Safari (for example: 5.1.7).
I need to hide some element for Safari which is less than v7 :(

This hack worked out by combining multiple other hacks is for 6.1+:
/* Safari 6.1+ (9.0 is the latest version of Safari at this time) */
#media screen and (min-color-index:0)
and(-webkit-min-device-pixel-ratio:0) { #media
{
.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;
);}
}
Here is one for Safari 8 and newer:
/* Safari 7.1+ (9.0 is the latest version of Safari at this time) */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
refer this link:
https://jeffclayton.wordpress.com/2015/04/28/css-hacks-for-safari-6-1-7-and-8-not-chrome/

Use
if(speechSynthesis){
//code to be run in Safari 7+
}else{
//code not to be run in said versions
}
This should work, as speechSynthesis was added in version 7.
Source: http://CanIUse.com/#compare=safari+6.1,safari+7

See through effect with CSS (like iOS 7/Aero)

I am trying to design an application that runs on Node-Webkit. I have this crazy idea for the background, but I have no idea how I should approach implementing this with CSS.
This is the app how it looks right now:
I would like to give all dark green/blue backgrounds a see through effect (there are two, the darker for the top and the slightly lighter for the toolbar). Like this: (mock up, background is maybe a little too blurred)
I do not aim for a solution that has real see-through windows (like aero and iOS 7/OS X 10.10). A faked effect with a predefined, static background image is fine (which does not have to move when the window position change).
The implementation has to be memory and performance efficient.
I want to specify the type of background (dark or light) by setting the class of each element (like the tabs, toolbars, etc) to 'bg-dark' and 'bg-light'.
The approach I would take is this:
create two images, one for the darker background and one for the lighter background. (1920x1080px each, because my app must handle full screen nicely)
give each element a background class 'bg-dark' or 'bg-light'. This class defines a CSS background image.
with javascript, for each element in a certain class, calculate a value for background-position.
The issue that I see with this approach is that for each element, webkit/blink has to load the entire background image to memory. Is this true? Is there a better, more sane way to do this? It doesn't have to be cross-browser friendly, as I only need it for a Node-Webkit app (which uses one of the latest blink engines).
Edit:
Note that CSS opacity does not do the trick. I want the background to be kind of blurred, so simple transparency is not sufficient. Also, if the selected tab was actually translucent (opacity < 1), the dark topbar whould show through (which is not what I want).

Please monitor #issue132.
It would be a feature later.

In CSS there is a feature called transparency. Maybe this will get you through this.
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
With this you don't need to load another image which will consume memory and bandwith.
€dit: missed source: http://css-tricks.com/css-transparency-settings-for-all-broswers/

opacity is a way to do that.
But beware that it'll make entire container transparent.
ex:
container{
/* IE 4-8 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* All Modern Browsers */
opacity: 0.5;
}
In order to make only background transparent, I'll Suggest You to use transparent background-color.
AS:
container{
background:rgba(150,255,255,0.5); /*IE 9+*/
}
rgba stands for red,green,blue & alpha. I think that's what you're looking for.
Hope it'll help you.

CSS 3 text shadow in IE

I'm using CSS 3 text shadow to simulate bevel and emboss effect in my web app. The problem is IE 10 shows very bad looking shadow. I didn't checked it on IE 9 still now. But Can it be fixed?
This is the CSS I'm using ::
text-shadow: 0px 1px 1px #A4A4A4;
filter: dropshadow(color=#A4A4A4, offx=0, offy=-1);
Is there any javascript library to show text shadow in IE? or any other tricks that will help me? Or any extra CSS properties to add to solve this?

You could try the other shadow filter.
.shadow {
/* For IE 8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
Or use a behaviour file that simulates CSS3:
http://fetchak.com/ie-css3/
Update: Sorry, I misread, that shadow filter is for box-shadow, not text-shadow.
Internet Explorer does not suppurt text-shadow, but you can simulate this with a drop-shadow and a glow filter, see this tutorial.

Raphael opacity not displaying on IE

I'm having a problem with the opacity of a div when my site is viewed on Internet Explorer. Using Raphael 2.0 (un-minified) I create a rectangle using the following code:
var rIn = Raphael("myDiv", "100%", "100%");
rIn.rect(0, 0, "100%", "100%").attr({fill:"black", stroke:"none", opacity:0.6});
In my CSS files if I have transparent divs using the opacity tag, I also write it include filter which seems to work fine for IE.
opacity:0.6; filter: alpha(opacity = 60);
However, Raphael does not appear to allow filter as a property, so this rectangle does not show up at all. This is only a problem on IE - it works on FF/Chrome/Safarai on Win/Mac without a problem.

filter only works for IE5-7. To support IE8, you need this property as well before your filter property:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
This QuirksMode article should help you as well.
Actually, try a class:
.opacity60 {
opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
}
And set your rectangle's class to opacity60 via a setAttribute('class', 'opacity60') call.

Rotating a div element

Is it possible to rotate a div element using Javascript & NOT using HTML 5?
If so what attributes of the element do I set/change to make it rotate? Ie, div.what?
PS: When I say rotate I mean rotate an imagae around an axis, not every x milliseconds show a different image rotation.

Old question, but the answer might help someone...
You can rotate elements using proprietary CSS markup in all major browsers (the term HTML5 isn't specifically relevant here though).
Example of how to rotate a element 45 degrees using CSS:
.example {
-webkit-transform: rotate(45deg); /* Chrome & Safari */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9+ */
-o-transform: rotate(45deg); /* Opera */
transform: rotate(45deg); /* CSS3 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); /* IE 7-8 */
}
Yes, the MSIE syntax is that horrible. Note the "sizingMethod='auto expand'" - that's crucial to avoid the result being cropped.
I'm fairly sure Matrix transforms (at least in some capacity) are also supported In MSIE 6, but it's more pernickety about under what circumstances it supports them (and it's increasingly hard to care 8).

Yes, it is possible to rotate a div not using HTML5, but using CSS3.
You can experiment with CSS rotation on CSS3 Please (toggle the .box_rotate rule on).
For more info, Google for: css rotate
If you want a way to have rotated text that works on all browsers (including IE6) then try Raphaël.

I know I am late. For posterity's sake, I wanted to post this: This website is pretty good and it even performs the matrix transformations for its corresponding css3 counterparts

You can do it using Matrix in IE. Here is a function that solves it in a crossbrowser way.
http://kaisarcode.com/javascript-rotate

If you are looking for a way to do it instantaneously, than you can use
element.style.transform = "rotateZ(90deg");
Make sure to use quotes around the CSS statement.
If you want it over the duration of, say, a second (I know you don't want this, I am just doing it anyways), you can put
element.style.transition = "1s";
element.style.transform = "rotateZ(90deg)";