So, I’m trying to make my website look as crisp and as clear as possible (as is the goal these days), and was wondering if one of my favourite lines to use to achieve this (“-webkit-font-smoothing: antialiased;”) has a similar counterpart which works universally and has the same effect? Or, are there different ways for different browsers?
If i understand correctly you are may need to use vendor prefixes to achieve what you want with supporting multiple browsers.
Using pure browser specific css is not the best approach. I think the code below is enough for browser compatibility (add ofcourse your font, background, color, etc.).
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
/* font-size relative to 100% of device-font-size */
font-size: 1rem;
}
Related
What’s the default margin that HTML sets for its <body> tag? I noticed that there’s some automatic margin, but I’m wondering if anyone knows how much it is (and whether it’s in px or %, etc.).
In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.
If you want to change it, you can just do this:
body {
margin: 0px;
padding: 0px;
...
}
But if you have a large project and want to be more complete, use normalize.css. It resets a lot of default values to be consistent across browsers.
According to W3School's CSS reference,
the default properties and values for a body tag are,
body{ display : block; margin : 8px; }
And one can quickly get the computed details of any element by accessing the Computed Pane in the Chrome Dev tools.
css default values
https://www.w3schools.com/cssref/css_default_values.asp
body{ display : block; margin : 8px; }
* {
margin: 0;
padding: 0;
}
The body can also be reset using the asterix tag.
I am using the filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#0000FF',GradientType=0 ); code to set the gradient background image in IE9.
Here is my fiddle.
The result in IE9 looks like,
But, i got trouble with the border-radius style.
What's wrong in my code? Is there any solution for this?
I have found the similar question on
IE9 round corners and filter: progid:DXImageTransform.Microsoft.gradient With answer of
Add the browser specific class or Set svg data as background image.
I don't like to use different css file or adding different HTMLElement based on browser version.
It might affect the performance of page when i use svg data as background-image.
You can add another element inside your .gradient_style which will have background-image and filter set. Then set overflow: hidden on parent element and you should be good.
Example CSS:
.gradient_style {
background: transparent;
height: 50px;
width: 150px;
border-radius: 25px;
border: 1px solid #050DFA;
overflow: hidden;
}
.gradient_style div {
background-image: linear-gradient(to bottom, #FFFFFF 0%, #00A3EF 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#00A3EF', GradientType=0);
width: 100%;
height: 100%;
}
And HTML:
<div class="gradient_style"><div></div></div>
Working sample: http://jsfiddle.net/DymK5/2/
This is a known bug in IE9, where a background gradient using the filter style ignores the border-radius and always renders the gradient into the corners of the element.
It is unfortunate that IE9 didn't implement standard CSS gradient syntax, which makes this kind of thing necessary.
There are work-around options, but they're all a bit ugly.
The most well-known work-around option is to use an SVG data-URL for the gradient, for IE9 only. The issues with this are that you still need the filter for IE8 support, and of course IE10/11 does use standard CSS gradients, so you need to start using conditional stylesheets to set the styles depending on the brower version. It gets ugly very quickly.
I wouldn't worry too much about performance of this; it should be fine. The problems are more with managing the code than with perf. (and in any case, even if there is a perf issue, it will only affect the specific browser version involved, IE9, so it will be a relatively small portion of your audience)
Another option is to use the CSS3Pie polyfill script. This is a good option because it allows you to use standard CSS code for your gradients in all IE versions. Since you say you dislike using different CSS for different browser versions, this is a big plus point.
The downside is that it is Javascript-based, so could have performance implications. But that said, I've never seen it have any perf problems with it, as long as you're not over-doing it (ie using it for hundreds of elements on the same page).
If all else fails, I guess there's always the option of simply just not supporting gradients for old IE versions, and having a plain solid-colour background fallback.
I need to display a custom scrollbar. I would like to avoid using a jQuery plugin if possible. So can I so something like this with HTML5 & CSS3 ? :
.myScrollableBox {
width: 200px;
height: 500px;
/* Display scrollbar if content is bigger than the box */
overflow: auto;
/* This doesn't work, but can I do something similar? */
scrollbar-image: url(/images/myscrollbar.png);
}
It's actually possible, if browser does support styling of toolbar elements (= is based on WebKit). Although it's not mentioned in many tutorials (such as this brilliant one, for example), you can just use background-url property to use custom image instead of color.
For example, in this page I've changed (in Chrome Developer Tools) styling to...
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: url('http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/header-demos.jpg');
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
... and voila, I have some cyanid scroller. )
Yes you can, but it is not supported in every browser. Webkit (Chrome etc) has support for this using css:
-webkit-scrollbar
-webkit-scrollbar-button
-webkit-scrollbar-track
-webkit-scrollbar-track-piece
-webkit-scrollbar-thumb
-webkit-scrollbar-corner
-webkit-resizer
Read more: https://www.webkit.org/blog/363/styling-scrollbars/
In Internet Explorer you can user css like
scrollbar-face-color or -ms-scrollbar-face-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-arrow-color
-ms-scrollbar-base-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-track-color
Read more: http://msdn.microsoft.com/en-us/library/ie/hh772048%28v=vs.85%29.aspx
As far as I know, other browsers do not support this at the moment.
no, that is not really possible. The scrollbar used by the browser is not an image placed inside the html page. It is part of the browser logic. You cannot simply replace that.
This question is geared towards CSS3, I've been looking at a few boilerplate templates and guides and most of them declare a whole lot of attributes before even going into what you want to edit.
Why is this so? Does declaring all of the usable attributes make the
browser load faster or something?
What are the benefits? Why not just use CSS3 "as is" (like just declaring what's being used in the HTML section)?
And if the underlying attribute changes in further editions, wouldn't
it mean you would have to constantly keep a check on deprecated
attributes and keep declaring and changing attributes every once in a while?
HTML5Boilerplate contains a version of normalize.css. Rather than just reset everything to 0 (i.e. margins, padding etc) it has the minimum set of changes to ensure things have the same settings in all browsers. In their own words:
“Normalize.css is a customisable CSS file that makes browsers render
all elements more consistently and in line with modern standards. We
researched the differences between default browser styles in order to
precisely target only the styles that need normalizing.”
An example of a style used here is:
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
This fixes some weirdness in older IE, as well as on iOS. This is the sort of thing that you'll likely have a problem with, read loads, find a solution and add in eventually yourself. By using this set of defaults you can avoid a lot of weirdness.
As well as bugs, it includes things you'd likely want anyway:
nav ul,
nav ol {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
Using a ul in a nav is a common pattern, and you usually don't want bullet points there. This sorts that for you.
In all, I'd recommend using your own custom version of their code – it will save you a lot of annoyance!
Also if you want to add CSS3 functionality you can add it to ie5 with javascript(not to say this doesn't come with its cons) with html5shiv or html5shim .
Also lets examine the definition of the acronym CSS. Cascading Style Sheets. You may declare styles in order of fall back. i. e.
body {
style-1: new browsers (this renders yay!)
style-2: semi-new browsers (don't understand style-1 I will ignore ahh style2)
style-3: ie5(me want to crash soon or BOD you. but me not get either 1 or 2 they smart but i think i can work on style 3)
I've been working with Modernizr and it is a wonderful resource, just a great project. However, the way I've been using it is:
Design with baseline (IE) CSS
Enhance with CSS3 effects for advanced browsers
Unless I was going to completely replace the styles based on behavior, why shouldn't I just add styles such as box shadows, gradients and border radii to the stylesheet? If the browser doesn't understand a rule, it will just ignore it, correct? And if JavaScript is off, I can't use it anyway.
Should I be using the above method in the typical case, and Modernizr for advanced cases? Or is there something wrong with relying on browsers to ignore what they don't understand?
You're totally right that older browsers completely disregard much of what's in CSS3.
Because of that, I do my css3 in my basic selectors.. but often make use of the modernizr's no-feature classes to handle the older browser case:
div.box {
height:50px;
-moz-box-shadow: 3px 3px 5px #555;
-webkit-box-shadow: 3px 3px 5px #555; }
div.box span.fakeshadow {
display:none;
}
.no-boxshadow div.box span.fakeshadow {
display:block; background: url('fakeshadowbg.png');
}
I hope that makes it more clear.
You can use (html 5) elements that some browsers do not support yet. Also you can specify fallback styling.
A lot of browsers create their own CSS rules for things like text-transform. With Modernizr you can write one rule and Modernizr makes it happen for multiple browsers.
I think it's just convenience.