I know that most of the "modern" browsers supports #font-face in CSS. But there may be some exceptions. I would like to know if it is possible to change font size of some selector based on #font-face browser support. ie, I would like to set font-size of a <span>.
I want 20px if browser support #font-face and 30px if not. How can I make this possible? It will be great if this can be done by using pure CSS.
I think here you should be use IE Hacks and you can also read about other hacks chrome
and firefox to be able check versions and match them, but i wanna focus on specifiec browser - Internet Explorer
So as i started to say, you can use IE hacks to match fontsize, example:
<!--[if IE]>
<style>
span{
font-size: 30px;
}
</style>
<![endif]-->
<style>
span{
font-size: 20px;
}
</style>
Like I said, you can use firefox/chrome and other browsers css "hacks" to check version, and check supporting #fontface, I've not gave you fontface example since I don't have link and i perfer not make a confuse.
Hope I helped.
EDIT: I'm not sure if I'm clear then I would like make a fast point:
You can check each browsers (also each version) and see if he support fontface, if he doesn't you just use the same browser hack to change span font-size.
Related
I have been trying to solve this for 2 hours now but no luck. The less code snippet works fine in all browsers except IE8. I checked IE8 supports :after and :before
I'm using standard IE8 doctype, using HTML5 shiv and also not running this in compatibility mode?
#media print {
.app-header .large-header {
.logo span,
h1,
.action-links {
display: none;
}
.logo:before {
content: url('images/logo.png');
position:absolute;
top:0;
left:0;
width:150px;
height:28px;
}
}
}
UPDATE
Issue is that IE8 doesn't support printing content url. The workaround is to use an image instead.
IE8 does not support media queries this: #media print {} is not supported.
create a separate css for IE8 and in the HTML put a conditional like this:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->
See for yourself https://msdn.microsoft.com/en-us/library/ms530813(v=VS.85).aspx
Dynamic HTML (DHTML) expressions can be used in place of the preceding
value(s). As of Windows Internet Explorer 8, expressions are not
supported in IE8 Standards mode. For more information, see About
Dynamic Properties.
I don't know about your markup but is it an option to remove the background image of the logo and use an actual <img> tag for it?
That way you would not need to change a lot of styles for printing pages. You should also keep in mind that there are a lot of printers out there, which disable background-imagery and background-colors by default!
in most browsers the site I am creating is fine. But in Google Chrome the font I'm using has lots of cracks in it and doesn't render properly at all.
Chrome:
FireFox:
I've tried various fixes for it but am still unable to get it to how the site is on firefox. Here is my CSS for the font face:
#font-face {
font-feature-settings:'liga=0';
font-feature-settings:'liga' 0;
-moz-font-feature-settings:'liga=0';
-moz-font-feature-settings:'liga' 0;
-webkit-font-feature-settings:'liga=0';
-webkit-font-feature-settings:'liga' 0;
font-family:'ChampagneLimousines';
src: url('/Resources/CLB.eot'); /* IE9 */
src:url('/Resources/CLB.svg') format('svg'),url('/Resources/CLB.woff') format('woff'),url('/Resources/CLB.ttf') format('truetype');
font-weight:700;
font-style:normal;
}
A few things to try:
Get the official web font files for your font if possible
Otherwise use a tool like the font squirrel generator
Use the bulletproof font face syntax
Use the Chrome SVG font trick for smoother rendering in Chrome
Chrome renders better at certain font sizes than others. Try setting e.g. font-size: 16px then incrementing / decrementing 1px at a time to find a compromise
It could just be that your web font is badly hinted, so find an alternate one
Note that Chrome, Firefox and IE all use different font rendering engines, so they'll always look a bit different
You can follow these steps:
Control panel-> Fonts -> Adjust clear type.
I found this solution and it worked for me.
I tried adding a conditional css style for Internet Explorer but it isn't working.
I've tried
<!--[if IE]><style type="text/css">nav{letter-spacing:.5px}</style><![endif]-->
<!--[if IE]><!--><style type="text/css">nav{letter-spacing:.5px}</style><!--><![endif]-->
Neither work.
The blog is http://costumingdiary.blogspot.com
Notice the links at the top of the page. They fit okay in Chrome, but IE widens the letter spacing too much. In Chrome, the link text is centered with extra spacing on either end. In IE, the text stretches all the way across to fill the space. If I change "About" to "About Me", the text will overflow to a second line in IE but not in Chrome.
Any help to set the conditional please? Thanks.
UPDATE: The fact that IE10 doesn't support conditionals is the big reason why I've given up on this. There is no simple css way to fix this. Adding javascript has proven to much for me. Actually adding javascript defeats the purpose of me removing (by way of adding comment tags) as much "unremovable" Blogger imposed script from my blog as possible. I guess I'll have to live with the stretched-to-the-max IE text. :(
Why do you think that conditional comments syntax is wrong? See full description of comments syntax, in your example all is right.
I get html source code from your link - there is no conditional comments where, but has big html comment with script which contains encode conditional comments(!)
You can use the below conditional for anything below IE9:
<!--[if lt IE 9]>
<script src="path" type="text/javascript"></script>
<link href="path" rel="stylesheet" type="text/css" />
<![endif]-->
If you want to target other versions of IE you can look here.
--EDIT--
You will need to add a HTML5 polyfill to enable support for the <nav> element on IE8 and below.
You could use Html5shiv or Modernizr
Your Body CSS rule has a letter-spacing:1.2px; That determines the spacing between your characters. I am looking at the page in Internet Explorer and Chrome and the fonts seem to render pretty closely to me. Also do not assume font rendering between platforms is consistent. If you develop on a MAC for example, they use a completely different font rendering sub-system than Windows for example. So test Chrome on the same system as IE. Also do NOT assume IE 8 is the same as IE 9 is the same as IE 10 or 11.
body {
background-color: #294A63;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
letter-spacing: 1.2px;
line-height: 1.4;
margin-left: auto;
margin-right: auto;
max-width: 960px;
min-width: auto;
overflow-y: scroll;
}
I am having problem defining CSS rules for browsers that do not support font-stretch property (webkit, etc)...
THE PROBLEM:
I am using Helvetica Neue font (CSS setup from Twitter Bootstrap) and I use font-stretch:condensed; property on some of my CSS rules. Unfortunately I have soon figured out that this property is not supported in Webkit and some other browser, and I began searching for a fallback rule.
One solution found here for webkit browser is to use post script font name font-family: "HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;. But it is really only Mac solution. Windows browsers will not have this font and will fallback to non stretched font.
So the only real solution for using condensed font is to import a font from a site like myfonts.com, google webfonts etc... Since I am looking for a FREE solution I found some FREE fonts that come close to Helvetica Neue Bold Condensed. I am now wondering is there a way to specify a CSS rule only target the browsers that do not support font-stretch property?
The only way I can think of, is javascript feature detection:
if (document.createElement("detect").style.fontStretch === "") {
document.getElementsByTagName("html")[0].className += " fontstretch";
}
add this in your <head> tag.
this will add a fontstretch class to your html tag so you could:
set the #font-face rule as a standard - it will be the fallback for browsers that do not support font-stretch
use .fontstretch as a css hook to set the font-family back to Helvetica Neue and apply font-stretch as well.
I came accross a meaningful solution when I was searching for something else that allows you to specify the browser specific css using .ie9 .yourclass .chrome .yourclass etc in your css file. It uses a small javascript file that can be loaded in the _layout file or masterpage file..
That link is Here
I am relatively new to web development and learning all the time. I have recently come across 'Conditional Comments' when viewing source code for different websites. I think i now understand what they do but am unsure as to when to use them.
I have seen them mainly used for implementing different stylesheets when it comes to IE and would like to know if this is good practice?
In which case if the answer is 'Yes'. Then when developing a site is it 'common place' to use two separate stylesheets to fix bugs, for example create one stylesheet for IE and one for Firefox, Opera etc?
Thanks in advance.
Conditional comments are only supported by IE, as far as I know, and they gracefully downgrade in browsers that don't support them (since they look like a normal comment). The general consensus is that it's OK to use a non-standard browser feature if you're using it to combat another non-standard browser "feature" (i.e. the crappy support for CSS in IE). So you'll find that it's a very common solution for tweaking CSS.
The nature of Internet Explorer (version 6 especially) makes it so that some stylesheets work well with IE, and some don't. For the purposes of those that don't, you can use conditional comments to have CSS code that only displays for IE. I have to use it because of how Internet Explorer (mis)handles CSS dropdown menus.
To make the website I'm working on properly render the hover feature of the dropdown menu, I have to implement the crosshover.htc file. Here's the code I have to use:
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(http://www.stannscatholicschool.com/csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: 100% verdana, tahoma, helvetica, arial, sans-serif;
}
</style>
<![endif]-->
If I don't do that, the dropdown menu splits apart and can't be navigated in Internet Explorer 6.
I have used conditional comments to detect if visitors to my site uses IE6 or lower. If that is the case, I load the IE7.js script, which overcomes some of the bugs in these older browsers. There is also a script for emulating IE8 support.
Some people also use comments to help outline certain areas of the page like a footer, header or main content (often in templates).
However if you are using divs and CSS (which it sounds like you are) you should be able to tell what the content is or what area of the HTML you are in by the DIV ids and CSS styles. Remember to use clear names and try not to abbreviate them just for the sake of easier typing.
If that is an issue for you then Intellisense is a wonderful thing and can help us get around stuff like that. If not then CTRL+C and CTRL+V is probably the next best thing :)
This is a great practice! The official documentation page of conditional comments, has many examples and combinations of conditional comments, it's worth reading it. The page also states that:
Conditional comments make it easy for developers to take advantage of the enhanced features offered by Microsoft Internet Explorer 5 and later versions, while writing pages that downgrade gracefully in less-capable browsers or display correctly in browsers other than Windows Internet Explorer. Conditional comments are the preferred means of differentiating Cascading Style Sheets (CSS) rules intended for specific versions of Internet Explorer.
Nowdays Internet Explorer is the least capable browser, so you're most likely going to use conditional comments to do the exact opposite, that is, to take advantage of the enhanced features offered by all other browsers, while writing pages that downgrade gracefully in Microsoft Internet Explorer.
You can use conditional comments to fix unsupported CSS styles, or to hide code from Internet Explorer, like this:
<!--[if !IE]>-->
<script src="IE_will_never_see_this.js" type="text/javascript" charset="utf-8" ></script>
<!--<![endif]-->