I would like to know about the basic compatibility issues in the major browsers (Internet Explorer, Chrome) when compared to Mozilla Firefox, such as:
Text Alignment
Color
Font Size
Tool Tips
Paragraph Alignment
Text Bold
Shapes other than images
Line overlap
Table visibility
Thank you!
This is a really vague question, but I find Quirks Mode extremely helpful with all aspects of browser compatibility. Also look at A List Apart.
This is a pain big enough that the smart people at Yahoo have written several CSS normalizing components for their excellent YUI library. Please see Reset CSS (developer.yahoo.com/yui/reset), Fonts CSS, Base CSS, and Grids CSS components.
Related
I'd like to try some decorative fonts for a web site, like this one (just as an example):
http://www.dafont.com/nymphette.font
As usual, for the web one must verify the format compatibility of the font and licensing - no problem with that. The question is relative to the proper integration in a page without side effects. As you can see in the character table, decorations are mapped to regular characters - e.g 'A'. Let's suppose I want to use the decoration mapped to A; if the web page is consumed on a browser which doesn't support external fonts, of when the font is not downloaded yet, the decoration would be rendered as 'A', and it's confusing; a browser with accessibility support would probably speak the letter out loud, etc...
How to avoid that?
Thanks.
PS Of course it appear simpler to use plain image decorations. My question is not related to solving a problem, rather to experiment with this approach and understand how workable is.
** Update: I clarify that I know how to embed fonts in CSS, and I'm already using some "regular" (alphabetic) fonts from Google. The difference between alphabetic fonts and decorative fonts is that clearly you encode readable text with the former ones; you can minimize inconveniences during the loading by specifying fallback such as "serif", etc... With decorative fonts, you're using characters to represent graphics, hence my doubts.
You can embed fonts in your CSS.
You might also want to look into the Google Font API if you want some Google fonts with no learning curve.
I'm looking to do a portfolio site, and I wanted to do some creative drawing on the website without using images.
I considered canvas, which I really think would be cool, plus an interesting project, however, I heard that IE has no compatibility (is that true?) so I cannot have that.
Then, I considered Raphaël, which seems like it's the most viable option thus far.
Ughh, there was another library that I can't remember the name to, which also seemed like a good option.
What do you guys think about Raphaël and its overall compatibility, and its capabilities, regarding the kinds of drawing its capable of. I was browsing through the documentation and I think it's quite powerful.
Do you want to draw the vector graphics on the site itself, or just publish premade vector graphics?
If the former, have a look at svg-edit which can easily be embedded in your site, and which works in most browsers (old IE versions require the chrome frame plugin, but IE9 will be supported by svg-edit 2.6).
If the latter then there are probably many options, here are a couple off the top of my head:
Use SVGWeb - get started quickly with that using templates from svgboilerplate.com
Serve svg to browsers that support it, and static images to everyone else
<object data="your.svg" type="image/svg+xml"><img src="staticyoursvg.png"></object>
Well you could download Inkscape and draw what you want cross-browser in there.
Then go to my website (Page with tool and instructions below) and use the SVGTOHTML converter there.
I'm adding more with each release.
The SVG is conveted into Raphael and there are a couple of options as to what format you can have.
The version is at 0.57 at the point of typing this.
http://www.irunmywebsite.com/raphael/svgsource.php
It isn’t true that IE doesn’t support canvas. IE9 will support it, which is the same version that will support SVG.
For SVG development, it depends what you want to do. For static images you can even use Illustrator or Inkscape then save/export as SVG. If you do this, remember to use Scour [0], as the auto-generated markup can be a bit crufty. I usually just write the SVG by hand, unless I'm doing something complex, in which case it is better to use a image editor.
There are no real good editors to add animations though, so I always add those by hand. Things like SMIL (used for animating SVG) are not that difficult to learn, but a bit verbose. If you use SMIL then it is recommended to use FakeSMIL, which is included in the SVGBoilerplate that Erik links to above, as some browsers have lacking support for SMIL.
If you want to use a JS library to generate the SVG rather than writing by hand or using an editor, then Raphaël is probably the most mature. There is also Dojo GFX [1]. Which is best really depends on personal preference and what you are trying to do. It would be best to try them out with something simple and see which you prefer.
[0] http://www.codedread.com/scour/
[1] http://docs.dojocampus.org/dojox/gfx
Look into SVG Web, it uses Flash to emulate SVG in non-supporting browsers. It's written by industry leaders like Brad Neuberg and it doesn't interfere with the way you want to write SVG markup so when the browsers that don't support SVG disappear you can ditch it and your SVG markup will still work. With Raphaël, you have to to write JavaScript code instead of SVG markup, so you have to keep using it forever, or re-code your graphics. Also, Raphaël only supports the lowest common denominator between SVG and VML, so you can't do much. It even emulates some VML bugs in SVG, so that both graphics look the same. Raphaël is better for dynamically generated SVG, but for other cases, I'd recommend SVG Web.
I am investigating the usage of SVG fonts in #font-face declaration. So far, only Safari 4 and Opera 10 seem to support it. Firefox 3.5 does not support it but there is a bug report but no fix has been supplied yet (though there are patches).
I am wondering, with #font-face support in major browsers, what is the advantage of using SVG font format in lieu of TTF/OTF/EOT formats? The only advantage I can glean from the discussion linked above was that you can add your own missing gylphs to fonts that do not support them yet.
Is there any other reason to specify SVG fonts in CSS?
It seems to be the only way to use web fonts on Mobile Safari. So that's a pretty big advantage if you're developing for iPhones and iPads. Font Squirrel's #font-face generator can create the appropriate SVG file and CSS syntax from any OpenType font.
The W3C states these advantages:
One disadvantage to the WebFont facility to date is that specifications such as [CSS2] do not require support of particular font formats. The result is that different implementations support different Web font formats, thereby making it difficult for Web site creators to post a single Web site using WebFonts that work across all user agents.
To provide a common font format for SVG that is guaranteed to be supported by all conforming SVG viewers, SVG provides a facility to define fonts in SVG. This facility is called SVG fonts.
SVG fonts can improve the semantic richness of graphics that represent text. For example, many company logos consist of the company name drawn artistically. In some cases, accessibility may be enhanced by expressing the logo as a series of glyphs in an SVG font and then rendering the logo as a 'text' element which references this font.
But the point of a common format doesn't really count because of the lacking browser support.
svg webfonts cannot work within an offline webapp. You can see an example here: http://straathof.acadnet.ca/beta2.2 Save this file to an idevice homepage, turn on airplane mode and open it. The svg fonts and the naming system used cause the font url to fail.
hopefully Apple fixes that soon.
Does IE6 support css-sprites?
Yes IE 6 supports sprites but doesn't support 24 bit PNG transparency.
I use this css hack for giving IE < 7 a gif file and everything else a 24 bit png with transparency.
background-image:url(/images/sprites/icons-sprite.png);
_background-image:url(/images/sprites/icons-sprite.gif); /* IE<7 gets the crappy icons */
You can also use Glue http://gluecss.com/
It's an open-source command line tool to generate sprites.
CSS sprites is a general solution using backround-position, which is avaible even in IE5.
A good tutorial about them is located here: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
I have encountered the IE6 CSS sprites problem myself - I blogged it here:
There's a really easy fix - I quote myself here...
Luckily, the solution wasn't too bad. Internet Explorers passim seem to ignore overflow:hidden when a child element is set to position:relative. Not good news... but the solution is easy - set the element with overflow:hidden to also be position:relative and then change the position:relative declaration on the child to be position:absolute... the jobs a goodun.
The full details can be found on that link.
Yes. If you're using PNGs though you should consider a few things. Here is a decent summary of IE 6 PNG issues:
http://24ways.org/2007/supersleight-transparent-png-in-ie6
Yes.
CSS sprites is just a technique to use offset on background images to display different parts of the same image in different elements.
I use CSS sprites on for example the main menu on the website of the company I work for, and the flags on my own web site. I started using it before it was even called CSS sprites...
Browsers which support background-position property will support CSS sprites also.
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Please take a look at the following questions also
CSS Sprites images rendered with bad quality in IE
CSS Sprite Help
You could just use an online sprites generator. There are so many of them available for free and most of them support all browsers.
Sprites can work perfectly in ie6. But a png image will not work, so use a gif. If you process a gif with Smush.it to losslessly remove overhead, you might get a file size smaller than the corresponding png.
Our (beloved) designer keeps creating PNG files with transparent backgrounds for use in our applications. I'd like to make sure that this feature of the PNG works in "older" browsers as well. What's the best solution?
edits below
#mabwi & #syd - Whether or not I agree about the use of a PNG is not the point. This is a problem that I need to solve!
#Tim Sullivan - IE7.js looks pretty cool, but I don't think I want to introduce all of the other changes an application. I'd like a solution that fixes the PNG issue exclusively. Thanks for the link.
IE PNG Fix 2.0 which supports background-position and -repeat!
Also paletted 8-bit PNG with full alpha transparency exist, contrary to what Photoshop and GIMP may make you believe, and they degrade better in IE6 – it just cuts down transparency to 1-bit. Use pngquant to generate such files from 24-bit PNGs.
I've found what looks to be a very good solution here: Unit Interactive -> Labs -> Unit PNG Fix
update Unit PNG is also featured on a list of PNG fix options on NETTUTS
Here are the highlights from their website:
Very compact javascript: Under 1kb!
Fixes some interactivity problems caused by IE’s filter
attribute.
Works on img objects and background-image attributes.
Runs automatically. You don’t have to define classes or call
functions.
Allows for auto width and auto height elements.
Super simple to deploy.
IE7.js will provide support for PNGs (including transparency) in IE6.
I've messed with trying to make a site with .pngs and it just isn't worth it. The site becomes slow, and you use hacks that don't work 100%. Here's a good article on some options, but my advice is to find a way to make gifs work until you don't have to support IE6. Or just give IE6 a degraded experience.
Using PNGs in IE6 is hardly any more difficult than any other browser. You can support all of it in your CSS without Javascript. I've seen this hack shown before...
div.theImage {
background : url(smile.png) top left no-repeat;
height : 100px;
width : 100px;
}
* html div.theImage {
background : none;
progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");
}
I'm not so sure this is valid CSS, but depending on the site, it may not matter so much.
(it's worth noting that the URL for the first image is based on the directory of the stylesheet, where the second is based on the directory of the page being viewed - thus why they do not match)
#Hboss
that's all fine and dandy if you know exactly all the files (and the dimensions of each) that you're going to be displaying - it'd be a royal pain to maintain that CSS file, but I suppose it'd be possible. When you want to start using transparent PNGs for some very common purposes: a) incidental graphics such as icons (perhaps of differing size) which work on any background, and b) repeating backgrounds; then you're screwed. Every workaround I've tried has hit a stumbling block at some point (can't select text when the background is transparent, sometimes the images are displayed at wacky sizes, etc etc), and I've found that for maximum reliability I'll have to revert to gifs.
My advice is to give the PNG transparency hack a shot, but at the same time realise that it's definitely not perfect - and just remember, you're bending over backwards for users of a browser which is over 7 years old. What I do these days is give IE6 users a popup on their first visit to the site, with a friendly reminder that their browser is outdated and doesn't offer the features required by modern websites, and, though we'll try our best to give you the best, you'll get a better experience from our site and the internet as a whole if you BLOODY WELL UPGRADED.
I believe all browsers support PNG-8. Its not alpha blended, but it does have transparent backgrounds.
I might be mistaken, but I'm pretty sure IE6 and less just don't do transparency with PNG files.
You sort of are, and you sort of aren't.
IE6 has no support natively for them.
However, IE has support for crazy custom javascript/css and COM objects (which is how they originally implemented XmlHttpRequest)
All of these hacks basically do this:
Find all the png images
Use a directx image filter to load them and produce a transparent image in some kind of format IE understands
Replace the images with the filtered copy.
One thing to think about is Email clients. You often want PNG-24 transparency but in Outlook 2003 with a machine using IE6. Email clients won't allow CSS or JS tricks.
Here is a good way to handle that.
http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/
If you export your images as PNG-8 from Fireworks then they'll act the same as gif images. So they won't look shitty and grey, transparency will be transparency but they won't have the full 24 bit loveliness that other browsers do.
Might not totally solve your problem but at least you can get part way there just be re-exporting them.
I might be mistaken, but I'm pretty sure IE6 and less just don't do transparency with PNG files.
I have two "solutions" that I use. Either create GIF files with transparency and use those everywhere, or just use them for IE 6 and older with conditional style sheets. The second really only works if you are using them as backgrounds, etc.