Again, Arial Black is the exception, giving one more weight to the Arial family. no other variation than condensed can be targeted (save the Arial Black oddity which quite doesn't work as expected - see below)įont-weight and font-style work as expected but for the fact that all fonts have only two weight available.none are installed by default, they're installed with MS Office.
there are not even a handful of fonts with condensed versions.For example, you can target font-stretch:condensed font-family:Arial or directly font-family:"Arial Narrow", both work. IE allows also the font-stretch to be used, along with the name of the font - if at all available, which is rare. Common sense from a product placement perspective dictates that I find it doubtful that a desktop OS would ship with so little fonts installed. Common sense from a vendor perspective would say that it should be similar to Android. I haven't tested anything on Chrome OS.This holds true for both Chrome and the abomination installed by default on Android.So, to target a narrow font, you have to use sans-serif-condensed you cannot use the font-stretch:condensed property. You have to select them with the font-family selector. However, you cannot target the sans-serif-light or sans-serif-condensed with CSS attributes. Then you can use font-weight and font-style to target different weight and the italic version.
#TARGET ALL VERSIONS OF SAFARI IN CSS ANDROID#
There are a few aliases such as Arial (alias to sans-serif) or Georgia (alias to serif) but if you want to target Android you should add the serif-liked syntax for better support. You can target it with the following values: sans-serif, sans-serif-light and sans-serif-condensed for the different variants. Let's start out with the simplest one: Android. Their handling of the native fonts is - of course - different.
#TARGET ALL VERSIONS OF SAFARI IN CSS MAC OS#
In this realm, there are three players that handle both the OS and the browser: Apple (Safari on Mac OS and iOS), Microsoft (IE on Windows) and Google (Chrome and their default browser on Android). There are a few non-CSS techniques that I will cover in a later blog post.Continuing on my journey to find the proper set of fonts for my website, I was a little surprised to see the way the different vendors handle native fonts in CSS. Unfortunately, no love before IE9 for rounded corners. ms-filter: "progid:(startColorstr=#ff641d1c,endColorstr=#ffff0000)" * Safari 5.1+, Mobile Safari, Chrome 10+ */īackground-image: -webkit-linear-gradient(top, #2F2727, #1a82f7) īackground-image: -webkit-gradient(linear, left top, left bottom, from(#641d1c), to(#f00)) įilter:progid:(startColorstr=#ff641d1c,endColorstr=#ffff0000) ms-filter:"progid:(Strength=3, Color='gray')" īackground-image: -moz-linear-gradient(top, #641d1c, #f00) * offset left, top, thickness, color with alpha */ CSS3 Features Drop Shadowsĭrop shadows, called a ‘box-shadow’ in CSS, allow you to put a shadow on a specific element.įull support: FF, Safari, Chrome, Opera, IE5.5 and up Note, since Safari and Chrome both use the Webkit engine to render pages, you can target both browsers with a single line. If you aren’t going to support one of these browsers, just remove the lines from your CSS. Here are all the prefixes for the different browsers. This is how a prefixed CSS3 feature looks for Firefox -mox-box-shadow: 5px 5px 5px black However, if you want to support older versions, you need to use the experimental prefixes. If you are only support the latest versions of each browser, thats all you will need.
Below is a bunch of CSS that will give you these CSS features in as many browsers as possible (yes, including older versions of IE).Ī standard CSS3 feature looks like this in CSS. This means you need multiple lines to accomplish the one CSS feature, to target all the different browsers. However, different CSS vendors will use different prefixes to standard CSS3 features while still in an ‘experimental’ stage. CSS3 supports a bunch of nice new CSS features, including rounded corners, drop shadows, glows, and gradients.
0 kommentar(er)
