i have table tag with border='1' attribute as source html.
it gives a different table out in IE8, and different in Chrome latest version.
border is different in style.
Why is such big difference and how can i achieve a consistent look and feel across different browsers?
Welcome to the frustration called web development and the inconsistency that comes with that.
Why is such big difference
The HTML5 and css RFC has a technical definition of every feature of the language, but it is not specific enough. Thus, it resulted in different browsers having different implementations of this language and therefore you'll notice slight variations that can break entire layouts. Also, often browsers implement features that are not officially supported by the language RFC, so those are not supported by other browsers.
how can i achieve a consistent look and feel across different browsers
Often you'll have to explicitly add properties to your style sheet to get rid of default styles. You can choose to limit yourself to features that are officially supported. Or you can create custom elements like custom dropdown menus and such.
Related
I am attempting to ask a more specific question than "how does browsers work??", please bear with me :)
If I understand correctly, html elements may have some default properties that determine their behavior. For example, <div> has display: block property set by default, while span has display: inline
These defaults exist because they are defined in the browser's default stylesheet.
Ok cool, I get that (hopefully). But what about <br /> or <img>? The behavior of those is determined by more than their properties right? Is it just up to the browser's implementation to make them behave how the W3 html5 specification says they should?
Also, is there an official word for this kind element behavior or does it just fall under 'browser implementation'?
So, you're really asking two questions here:
What is the default presentation and behavior of HTML elements?
Who/what determines how this works in a browser?
Let's start with question 2
The HTML specification is written and reviewed by a group within the W3C called the HTML Working Group. When they've agreed on a specification they publish it as a Recommendation. You can read the HTML 5 spec here, but I don't recommend reading the whole thing - it's very long and boring full of technical jargon.
However, the W3C's recommendation defines only the syntax and intended purposes of the features of HTML - it does not define how browsers should render HTML. Browser vendors, like Microsoft (IE), Mozilla (FireFox), Apple (Safari), and Google (Chrome), get to determine how their browsers render and implement the features of HTML.
Fortunately, most of the common HTML elements behave almost exactly the same from browser to browser. It's in the vendor's best interests to stay consistent among each other, because if one of them decided to do something drastically differently from all the others, the people who build websites would have to spend more time supporting that specific browser and it would fall out of favor (as was the case with IE 6 up until IE 11).
What determines the behavior of HTML elements?
The browser's rendering engine. Some browsers share the same rendering engines (like Safari and Chrome) (not true anymore - see comments), but not all. This article offers some insights (and leads to more insights) about how browsers are built, and here's an article listing several browser engines.
For the most part, you can affect how your HTML document looks by changing its CSS properties, but the behavior of most HTML elements is unchangeable without scripting using JavaScript.
The default CSS styles applied by your browser is defined by a stylesheet called its User Agent Stylesheet. These are usually pretty basic styles that browser vendors design in order to make HTML documents a little more readable without drastically affecting the presentation of the document.
However, there are so many basic styles applied by different browsers, that it's very common for web developers/designers to what's called a CSS reset. Normalize.css is a great example of this, and it's one of the most popular ones.
I believe it is up to the browser implementation. The way it will appear on the screen is up to the browser implementation.
Although, all browsers agree on how it should appear on screen.
These standards are defined by the World Wide Web Consortium - (wikipedia).
I guess this information you are seeking can be found in these sites!
When users visit my website, they don't care about how perfect or how much standard the page is coded. They only care about whether it works or not.
There are tags that are deprecated but have consistent behavior throughout all major, minor, and very minor browsers. They work now and will work in the future. (I'm not talking about optional tags like <marquee> and <blink> which will probably be removed in the future since their non-existence doesn't break pages.) The tags I'm talking about are for example:
<center> (used by google.com homepage, yes and it's May 2014)
<body bgcolor=, alink=, vlink=, link= (all used by google.com)
<font size= (also used by google.com)
If my HTML generator produces tags like <body bgcolor=black>, it is guaranteed to work for near 100% of users.
If it instead produce CSS like background:black;, it will be supported by lesser users compared to <body bgcolor=black>. (Start with https://superuser.com/q/732669/78897 and https://superuser.com/q/447269/78897, though I'm sure they are not the only ones in the whole world.)
Bear with me, this is a real question based on a true problem. Exactly what are the real disadvantages of having these tags as output?
Potential disadvantages include the following:
1) Your customer might actually care about how standard the code is. Maybe not now, but in the future. Maybe for questionable reasons, but still.
2) Deprecated constructs do not always work consistently. For example, align=center attribute set on a table may have different effects depending on browser mode. This is a relatively weak argument, though, since the browser practices have been described rather well in HTML5 CR and you can manage the potential problems. (Besides, even CSS settings may work inconsistently.)
3) There is no guarantee that deprecated features will be supported by all future browsers. On the other hand, the same applies to standard features. In practice, very few features that have been defined in HTML specifications have actually been removed from browsers. (Regarding tags, I think basefont is the only case.) All the examples mentioned, and also marquee, have been described in HTML5 CR as “obsolete” but still well-defined, and according to HTML5 CR, browsers are expected, and partly required, to support them all.
4) Your colleagues (designers/developers/...) may regard your code (and you) as old-fashioned, non-semantic, and whatever.
5) Code maintenance and development may be more difficult. If you have 1,000 pages with <body bgcolor=black> and the customer says they want a somewhat different background color, you would need to edit each page. This argument is, however, weaker than it seems to be. First, how often do such things actually happen? Second, if the pages have actually been generated using suitable tools, perhaps you just need to change the value of one parameter and regenerate them (or just let servers do that, if the pages are dynamically generated). Third, if you have a link element on all pages, referring to basic style sheet for the pages, as you normally should, you just need to add one rule to that style sheet. It is easy to override presentational HTML attributes with CSS.
To summarize, the practical arguments against your approach are rather weak. The most important arguments relate to coding style and principles.
I've added some more disadvantages:
Another disadvantage of using those tags is site bandwidth. When you put in html center, bgcolor and similar tags every time browser needs to load the whole content even if on every page those tags are the same or even if user visited this site many times. But when you place design in css file browsers may cache those files (especially when you set headers properly) so they only load html and images (if no cache is set).
One another thing is that if you decide to redesign the site/style new elements, it's much easier to put changes only in CSS files. It's possible in future you won't be doing those changes on your own or other companies/freelancers will be doing them and it will be much easier for them to make changes in the site. So the site will be cheaper to maintain.
In addition if html / php code is poor (or site is very complex) and many "visual conditions" appear in many files (for example on one page you decide to use one colour and you put it in HTML, on the other another colour) and something goes wrong it will be much easier to find the problem because you may simple cut some css and check where's the problem.
The disadvantage is when one of the major browsers chooses to get rid of the deprecated tag in a future release.
The advantage of using CSS over tags is that you can change the whole web site look and feel in a simple move.
Consider people that require larger font sizes. Colour blindness and also enable the most use of screen readers.
Even those consistent behaviour tags may be removed from browser. What if you would like to create HTML5 website? Then you will need to learn everything from scratch and change literally everything for your website to make it work because you never know if those tags will be supported in HTML 5 in future or only in older HTML documents
CSS provides easier maintenance, for one; client decides they want some elements aligned left instead of center? Change your css rule and poof, you're done. But if you're using old-school valign and such? Get ready to go change every single instance of that in the file(s).
I'm searching for the most prettiest way to formatting the HTML (HTML5) input fields. Are there a lot of solutions, but the all are so oldish. (the all use images, not CSS3)
I'd like a same select fields like these: https://lector.hu/en/, and I'd like to use a pretty upload area, and maybe an autosizing.
Are there any cross-browser compatibility javascript based libraries, which help to redesign the all input fields on html?
All of the solutions you've found are "oldish" because they're still the only way to style all input elements in a cross-browser way. Even your example link uses images. This will be the case even with JavaScript libraries, which usually just dyanmically replaces input elements with spans or other more stylable element.
The problem with styling form inputs, and why you won't find any cross-browser way that doesn't use images and/or element replacement, is because form elements are actually system elements, not HTML ones.
To demonstrate, open a website with default form fields in different browsers on the same system; then open the same website on a system with a different Operating System (for example, use a Windows and a Mac machine). You'll find that there won't be much difference between the browsers when on the same system, but there will be huge differences in the same browsers across different operating systems.
Some things are stylable - such as the borders on input fields, and so may be slightly different in different browsers, but you'll notice that things like dropdowns (selects) and the upload field will be nearly identical. This is because the browser doesn't have much access to change these elements (the possible exception might be Internet Explorer, especially older versions, because of how built in to Windows it is).
So, you have two options:
Bite the bullet and use images and/or JavaScript
Accept that the inputs will be slightly different across browsers and platforms (which isn't necessarily a bad thing, as it creates coherence with the system the user is using)
I am thinking about starting to use some HTML5 elements in my sites. With the varying lack of support for HTML5 in Internet Explorer I was considering using HTML5shiv. I have read that I would need to set the CSS for various unrecognised elements to be block level and also the possibility of issues with loading HTML5 elements via ajax.
I would like to know what issues others have encountered when using this script. Thanks.
If you're going to dynamically load HTML5 elements you'll need the innershiv. You'll also need to bear in mind that if the IE user has JavaScript disabled, it won't work at all.
I've found the existing solution to be highly unreliable when used in real world scenarios - it's fine for noddy little "hello world" examples but as soon as the pages start getting more complex then you will find that styles will stop applying on some requests etc.
It's not a very nice answer, but the truth is that if you need to support older IE versions then you basically can't rely on being able to style HTML5 elements reliably. If you can get away with using the elements but use superflous markup (divs etc.) to do things like layout then you might get away with it, but then it depends what you consider to be the lesser of the two evils : Loads of noddy markup or no IE support.
I have just started considering using the HTML 5 api for a Rails/JQuery project, so I can use that great data- attribute to store values.
I am worried though about browser compatibility issues. I have two questions (basic questions):
In order to use HTML 5, do people need to upgrade their browsers? How does that work?
Is there an up-to-the-day chart of what features each browser layout engine supports, more up-to-date than this Wikipedia article on comparing HTML layout engines and this When can I use... HTML 5 page?
Is it going to be an issue with people using IE6 for example? Lots of non-computer saavy people I've talked to who want to get an internet presence themselves use, and the people they talk to use, still, IE6!
If it's not an issue, and you can use HTML 5 on old browsers, how do you? Or what docs should I look at :)? Thanks.
Update: I will post some interesting links as I find them below.
FindMeByIP: "A simple app which reveals your browsers' support for CSS3 and HTML5 features in an easy to read format using Modernizr." - Browser Support for CSS3 and HTML5
It is not useful to consider HTML5 as a single entity, that browsers either ‘support’ or ‘don't support’. HTML5 is:
an attempt to codify widespread existing practice beyond the limits of what the previous W3 HTML and DOM standards had covered, such as IE and Firefox extensions that the other browsers have copied, and long-standing ‘DOM Level 0’ behaviours that everyone took for granted but weren't written into any spec before.
a random selection of new extensions not yet in widespread use, which it is hoped browser manufacturers will support. Some have already succeeded, heading into all new browsers already; some have been spun off into their own specifications (which is much more manageable for everyone), some are controversial, and some no-one cares about at all.
It has been, IMO, an enormous mistake to try to cover these two bases at once. I would have preferred an HTML 3.2-style ‘catch-up’ standard plus many separate extension specifications. But there's nothing can be done about it now.
HTML5 is also:
Not finished. The specification is massive, complicated, incomplete, and likely to change in details (or maybe more than that) before it becomes a proper standard. No-one can say they ‘support HTML5’ yet, because no-one knows yet what ‘HTML5’ is actually going to be.
In practical terms: there are some parts of HTML5 that have long been in use. There are some parts that you can use safely on modern browsers. There are some parts that you can use on new browsers except for IE. There are many parts you can use with fallback workarounds or ‘graceful degradation’. There are some parts you may never be able to use. For now you will have to learn each separately, because there won't be a browser that supports absolutely everything in HTML5 for many, many years. If ever. Add the extra features you like gradually as you go along and they're supported by a greater share of browsers; there will be no ‘big bang’ where everyone updates their browser at once.
As for data- attributes, well, yeah, you can kind of get away with using them, in that most browsers have always allowed any old attributes to go through anyway. This is typical of several HTML5 extensions, the browser doesn't need to explicitly ‘support’ it for it to work.
But since there are other ways of passing data (classes, comments, script blocks, etc.), I'm not wholly convinced it's worth dropping (universally supported, validatable against a fixed standard) HTML4/XHTML1 pages just for that one feature yet.
You might want to check out diveintohtml5.ep.io and modernizr.com.
Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
Here's an interactive chart of html feature support:
http://a.deveria.com/caniuse/
As you can see, there are a lot of browsers that support quite a few of the H5 features.
If you're using jQuery, concerned about interoperability, and the only reason you're investigating HTML5 is to use the data-* attribute set, then I would consider switching back to a better-supported doctype and using jQuery's $().data() method, which allows you to bind arbitrary pieces of data to DOM nodes, similar to how the data- attribute set does.
Example:
<button id="set">Click me!</button>
$('button#set').click(function(){
if($(this).data('name')){
alert('Clickin\' again so soon, ' + $(this).data('name') + '?');
}else{
$(this).data('name', prompt('Hey good lookin\', what\'s your name?', ''));
}
});
Try it out!
My answer might not be the one you would like but I would say - don't. Don't use HTML 5 just yet.
Use Protovis. It uses javascript and HMTL5. No Flash here. More important, Protovis has BSD license. So you can use it in commercial projects. Although D3 is the a newer project that authors of Protovis are working on.
Although this is an old(ish) question, the topic of browser support will always be relevant. There's no right way or wrong way to approach it, but take a look through one of the many browser feature support tables that show you what percentage of users will see a certain feature and then be brutal.
Don't try to please everyone. Don't kill yourself to catch a few percent of the Luddite's who are still using IE7. Next year, substitute that for IE8. Personally, I would be happy to lose 8% in order to spend that time on forward thinking practices rather than catering for those who don't know what an upgrade is.
Maybe your site will cause people to upgrade. These people will come round eventually.