Everything about Web and Network Monitoring
Everything about Web and Network Monitoring
With a growing number of various browsers and their versions, making website look consistent for everyone is an impossible task. Some startups even dump some browsers for the sake of saving time and money on making the websites compatible for different browsers. While this approach has yet to be proven as successful, the majority of developers still bother with cross-browser compatibility. Here are 5 tips of reaching cross-browser compatibility when designing websites. We hope they will be useful for you.
#1. How to set gradient color on div in Popular Browsers
First, we need to decide how we are going to use the gradient. I suggest using the gradient as an enhancement. Keep in mind that some browsers will not display the gradient well or at all. So you will want it to degrade gracefully. If the browser doesn’t display the gradient the design should still be excellent and not require the gradient in order to function.
Gradients can be applied to block elements such as DIV tags. We will be using a simple DIV tag in this example.
A simple class will be set up to build the DIV that we will display the gradient in. The DIV will be 100px wide by 100px tall. Here is the CSS to build the DIV:
.sample-box {
border:1px solid #999;
width: 100px;
height: 100px;
padding:5px;
color:#ccc;
}
Now, let’s add our gradient. We will start by looking at the webkit method. Using browser specific CSS isn’t the best solution since it only covers a single rendering engine.
However, as you will see, the major rendering engines offer the ability to render CSS gradients in their own way.
1. Webkit, namely Safari and Chrome, use the following CSS to render a linear gradient:
-webkit-gradient(type,start point, endpoint, from(start color), to(end color)
For example:
.gradient {-webkit-gradient(linear, left top, left bottom, from(#354bb8), to(#1a3366));}
2. Firefox uses the Gecko rendering engine.
The CSS is simple and follows this general format:
-moz-linear-gradient(start location, start color, end color)
For example:
background: -moz-linear-gradient(top, #354bb8, #1a3366);
3. Internet Explorer is the bane of web standards as most of us know.
I think many developers don’t take the trouble to use gradient color in IE.
But, believe it or not, IE 7 & 8 CAN render a gradient without an image.
Now this isn’t true of CSS. This takes a filter call within the CSS. Here is the code:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#354bb8', endColorstr='#1a3366');
That is all you need! Here is what Internet Explorer 8 renders with that code.
#2. How to set border radius in Popular Browsers like Mozilla, Chrome, Safari, Opera.
The CSS3 border-radius property allows web developers to easily utilize rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.
The code for this example is, in theory, quite simple:
#div1 {
border-radius: 3px;
}
However, for the moment, you’ll also need to use the -moz- prefix to support Firefox:
#div1 {
-moz-border-radius: 3px;
border-radius: 3px;
}
We will firstly deal with the syntax for the individual border-*-radius properties before looking at how the border-radius shorthand property works.
The border-*-radius properties can each accept either one or two values, expressed as a length or a percentage (percentages refer to the corresponding dimensions of the border box).
The Syntax:
border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]
For example:
border-bottom-left-radius: 8px 2px;
border-bottom-right-radius: 8% 7%;
border-top-left-radius: 9px;
Here is the code in a popular browser:
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
Our border-radius is set at the bottom: 3px, all around. We use vendor-prefixed rules first, for Mozilla, Webkit, and Khtml browsers.
Then we finish with the “standard” border-radius rule, which is currently supported by Opera 10.5.
#3. How to set background – image for select tags in Chrome
I want to use an image for the background of a select/dropdown. The following CSS works fine in Firefox and IE, but not in Chrome:
select {
Width: 80px;
Height: 30px;
Border: none;
Background-color: Transparent;
Background: url(image/bk_select.png) no-repeat 0 0;
Padding: 4px;
Line-height: 5px;
}
You can solve this problem very easily.
Please do the following.
Add one line above CSS styles:
select
{
…
-webkit-appearance: none;
}
#4. How to do CSS3 transition and animated effects in IE.
As you know, CSS3 animated and animated effects work fine in Firefox, Chrome, Safari and Opera.
But that doesn’t work in IE, so how can we make it work fine even in IE?
Before you try to solve this issue, please take a look at the following table.
|
Show all versions |
IE |
Firefox |
Chrome |
Safari |
Opera |
|
12.0 |
|||||
|
7.0 |
13.0 |
||||
|
8.0 |
14.0 |
20.0 |
5.1 |
||
|
Current |
9.0 |
15.0 |
21.0 |
6.0 |
12.0 |
|
Near future |
10.0 |
16.0 |
22.0 |
12.5 |
|
|
Further future |
17.0 |
23.0 |
As you can see, CSS3 animated effects work fine in all browsers except for IE versions lower than 9.0, but they work fine in IE 10.0.
.something
{
transition-property: background-color;
transition-duration: 2s;
background-color: red;
-webkit-animation-name: animation_name;
-webkit-animation-duration: sec;(e.g 1s)
-webkit-animation-timing-function: function name;(e.g. ease-in-out)
-webkit-animation-iteration-count: 1;
-webkit-animation-delay : 0;
-webkit-animation-play-state: running;
-moz-animation-name: animation name;
….
(that is the same one as –webkit)
..
}
@-webkit-keyframes animation_name{
0%{
margin-top: -100px;
opacity: 0.5;
}
50%
{
margin-top: -30px;
}
100%{
margin-top: 0px;
Opacity: 1;
}
@-moz-keyframes animation_name{
0%{
margin-top: -100px;
opacity: 0.5;
}
50%
{
margin-top: -30px;
}
100%{
margin-top: 0px;
Opacity: 1;
}
.something:hover
{
background-color: blue;
}
You can solve this problem easily enough using jQuery.
Please do as follows:
$(‘.something’).transition({x:’10px’});
$(‘.something’).transition({y:’10px’});
$(‘.something’).transition({x:’20px’, y:’20px’});
$(‘.something’).transition({rotate: ‘60deg’});
$(‘.something’).transition({skewX:’50deg’});
$(‘.something’).transition({skewY:’50deg’});
$(‘.something’).transition({skewX:’50deg’,skewY:’40deg’});
$(‘.something’).transition({scale:1.7});
$(‘.something’).transition({scale:[1.5,2.3]});
$(‘.something’).transition({perspective: ‘50px’,rotateX: ‘180deg’});
$(‘.something’).transition({perspective: ‘50px’,rotateY: ‘180deg’});
$(‘.something’).transition({perspective: ‘50px’,rotate3d: ‘1,1,0,180deg’});
$(‘.something’).transition({ x: -50}, function{
$(this).transition({opacity: 0.5});
});
$(‘.something’).transition({scale:1.7},’slow’);
$(‘.something’).transition({scale:1.7}, 2000);
$(‘.something’).transition({x:30},50,’linear’);
$(‘.something’).transition({x:30},50,’in’);
$(‘.something’).transition({x:30},50,’ease’);
$(‘.something’).transition({x:30},50,’out’);
$(‘.something’).transition({x:30},50,’in-out’);
#5. How to set CSS3 styles in IE8.
As you know, normal CSS3 styles like border-radius and gradient don’t work on IE 8.
Just add CSS styles as you normally would, but include a new line:
.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
As you can see, “behavior:url()” is newly added.
You would expect URLS in behavior: url() to be relative to the current directory, as they are in a background-image: url() style for example, but instead Microsoft decided to ignore standards here and make them relative to the docroot instead. So behavior: url(ie-css3.htc) should work if ie-css3.htc should work and if ie-css3.htc is in the root directory of the site.
You will probably run into issues with z-index, especially if embedding one IE-CSS3 enabled element inside of another. There are two simple workarounds:
Sometimes an IE-CSS3 element will show up at a slightly different position than the original, untouched element. There could be a few reasons for this:
Styles and their status
|
Style |
What works |
What doesn’t work |
|
Border-radius |
Setting a radius for all four comers |
Setting a radius for individual corners separately |
|
Box-shadow |
Element borders |
Any color other than #000 |
|
Blur size |
||
|
Offset |
||
|
Text-shadow |
Blur size |
The shadow looks a little bit different than it does in FF/Safari/Chrome, I am not sure why |
|
Offset |
||
|
Color |
You can download IE-CSS.htc on https://fetchak.com/ie-css3/ie-css3.htc.
Some have the “You can’t please everyone” attitude. Yes, your site will look different in each browser because each one interprets the coding differently. The goal with cross-browser compatibility is to make your site viewable in the major browsers that are available and to have the pages render correctly.
What do you think about these cases? Were they useful? Maybe you have better recipes?
