I have a web project that was created primarily with Internet Explorer in mind. Tool-tips have been implemented in HTML by using the "Alt" attribute in various elements. I am finding that the tool-tip display is inconsistent when using Safari and Firefox.
What would be the best way to implement consistent tool-tips across all browsers? Is jQuery the best option or is their a better attribute to use? Thank you.
The alt attribute is not intended to be used as a tool-tip. it is to help with accessibility. search engines use them as well as screen readers and other devices to help handicapped people use the web. If you want a true tool-tip your best best is probably to use some javascript solution. jQuery has quite a few tool-tip plug-ins that are pretty easy to implement and I would start looking there. Just check out the plug-in page on jQuery's website
Related
I've got plenty of experience in HTML, CSS, JavaScript, Jquery, etc. but I've yet to make the plunge into HTML5.
In trying to get my head around HTML5, I've become a bit confused. So it's a relatively new standard and my uninformed brain tells me it's not well supported. Is this true?
I've got a vague idea that there are some 3rd party scripts that improve HTML5 compatibility, again am I right?
Any good tutorials on getting to grips with the basics of HTML5 for an experienced developer?
Ok a lot of questions there but:
HTML5 is quite well supported on most modern browsers nowadays and it's generally safe enought to use as is.
Scripts to improve compatibility? you mean Javascript that detects how old your browser is and depending on the answer show you HTML 4.01 or 5? well maybe but again, it's at the point when it is not required anymore.
Yes: w3schools has a cool one.
All of that said bare in mind that HTML 5 is still in development and not a done deal. Some areas are still being implemented but at the speed things are take this is not an issue for starting to develop your pages in HTML 5.
This website - html5 doctor is a very usefull resource that you can browse looking for what's implemented where and how things are generally going.
I also found this link to be particularly useful when figuring out what's available for each browser and what's not.
Another subject that goes well with HTML5 is CSS3. Check them both out and maybe come back with specific questions ;)
the HTML5 buzzword is being used a lot, but people mostly use it to describe different things.
HTML5 is the newest (and as of yet, unfinished) iteration of the HTML standard, as presented by W3.org.
Purely, HTML5 is the markup language, but it is usually referred to as to include CSS3, and JS (in the form of the canvas element).
In the HTML area, HTML5 boasts some new element tags that should help developers add semantic meaning to their markups(e.g. header, footer, aside) , and also some useful functional elements (progress-bar, video, audio)
In the CSS area, there are some new properties that allow you to animate your elements, and orient them more easily.
In the JS area, you can read up on the Canvas element, which is a good competitor to Flash. It allows you to draw both using vectors, and bitmap data.
As for good references to HTML5, you can use http://html5doctor.com/ or http://www.html5rocks.com/en/
Hope this helps.
Please note that w3schools isn't such a good reference anymore. Although for just looking at the possibilities it's fine I guess.
I recommend the tutorial from Lynda, but there are other sites. Just search at google. It's also possible to buy a book, since there have been written a few already.
Fallback/polyfill Scripts & libraries like Modernizr,Javascript Libraries can help you take care of older browsers. (backwards compatible)
As for the browsers. Use chrome, it supports most of the functions. Look at sites like findmebyip for more information about what is supported.
HTML 5 support is not yet fully integrated in all browsers. They are still in development stage. For studying the HTML 5 the best medium would be w3schools
They have introduced new elements in HTML5 which has reduced our overhead for html. New Elements
CodePlayer
Videos for HTML 5
I defied all conventional knowledge, and wrote my HTML5 site first. Now I am writing the HTML4 site and adding a script which detects old browsers. The question I have is mainly regarding web safe fonts. I am aware that it is best practice to use HTML instead of images of pretty text, for the benefit of SEO. However, since the HTML5 website exists with the HTML in the headers, I wonder if it is safe to use images to represent those headers in the HTML4 version of the site. Simply put, will my web client's indexing suffer? I feel that the HTML5 version will ensure good ranking, but I wanted to put it to the community and get an opinion.
Second question, should I create the more accessible version in HTML4 or XHTML?
Finally, is there a simpler way to make a new site backwards compatible, and still be able to make use of newer technology?
After a fair amount of research, I found that it is not so unusual to create a site in HTML5, and implement items for the purpose of graceful degradation.
At this site: spacebug.com/gracefully-detect-old-browsers-and-fallback-from-html5/, the authors recommend not using PHP user agent variables to detect browser capability. It says that there are too many user agents and that headers change, etc. Check out the link for their in-depth explanation. It offers that the right way to do it is to use javascript to check for certain capabilities. Since my purpose is to either render it in HTML5 or render it in XHTML, this makes my life pretty simple.
Once I found that javascript was the way to go, a simple Google search led me to this site: diveintohtml5.info/detect.html. This offers a number of methods for detecting browser functionality as it relates to HTML5.
For those who are not as savvy with the code, or for those who are looking for a quick solution, the second website also offers a link to modernizr.com, which is an "open-source MIT licensed javascript library that detects support for many HTML5 and CSS3 features."
So, thank you all for your input. I have learned a great deal from this experience, and I am hoping it will make everything much more user friendly and efficient.
Happy developing!
Kat
I have been assigned the task of validating a website.
I searched the web and found this post of w3schools that
allows validating the HTML, CSS, XHTML, XML, WML of a website.
My question is, is that all the validation we need to do?
We want our website to be cross-browser and to work well on mobile phones.
Are there any better methods to validate our site?
Thank You.
First of all, w3schools is a terrible website; you'd be better off not using it for anything. For a markup validator, try this or this. Keep in mind that validation only ensures that your markup is syntactically, and to a certain extent, semantically correct, but does not ensure that it'll render or function how you intend across different browsers, for example. For that, you'll have to do testing yourself.
If all you've been told is that you need to "validate" the web site, then you've been given a really bad instruction, because it's nowhere near as complete as it needs to be.
Are you supposed to validate the HTML? Everything can be perfect in the HTML and CSS, and the site may still not work the same way in different browsers. A difference in interpretation of HTML/CSS is not necessarily an indication that something is "invalid".
Get better (or more precise) instructions if you can. Otherwise, make them up, deliver your result, and if it's not what was expected, charge normal consulting rates to do things again once you DO have more precise instructions.
If it's just HTML/CSS validation you're after, the validator at w3.org is the one you should be using. There are also validator add-ons for Firefox and Chrome.
If your goal is equivalent rendering in multiple browsers, the only solution is to test your site in the browsers that are important to you. Remember that different versions of a browser also count as different browsers.
Having a W3 valid structure/mark up doesn't mean, your website will look the same on every browser. There exist a lot of tools and plugins to emulate different resolutions or mobile device, but these often don't do a good job.
The only real way to find out, is to ask people to test it on their device.
I was just reading the guidelines and trying to get my head around the apparent contradiction in http://www.orchardproject.net/docs/UI-guidelines-for-theme-authors.ashx
On one hand, it says:
"Orchard assumes the use of HTML5... it is a strong recommendation. "
On the other hand it also says:
"Your web pages should work even if JavaScript is disabled in the browser"
How can the HTML5 tags possible work w/o JavaScript - which they have recommended as a solution? Since I'm doing a mobile application, should I totally ignore HTML5 tags then as the safest approach for browser compatibility in mobile?
Update: Anyone had a look at Twitter's new mobile site in HTML5? Is it using HTML5 tags and just focusing on modern smart phones?
I'm afraid you'll have to be a little more specific about the problems you are anticipating, in particular as compared to the same thing done without HTML 5. It's not clear to me whether this is a comment about Orchard or about HTML 5.
Another thing to keep in mind is that while we recommend HTML 5, you can perfectly well replace all the markup into whatever dialect you prefer to use.
Ended up using a different wrapper for the widgets that does have to depend on the generic wrapper for widgets which has pre-configured HTML5 tags like <header />.
I'm wondering if there are any good non-native form inputs for web development? I am currently using the built in <input> controls. They work just fine, but for my application they are too big (especially on OS X). I am wondering if there are any libraries that I can drop in as replacements.
I am especially interested in ones that:
Are a close to native control behavior as possible. Support for tabbing, highlighting current textbox, pressing up/down in <select>, etc.
Have something that replicates <select>
Look good and are compact
I am aware that you can use CSS for some styling, but it's pretty minimal and looks different depending on the browser.
Thanks for your help.
These two from Codrops give the native selects "display: none", then add an overlay that can be styled/modified.
Pretty simple, you just need to call the plugin on your select box.
Demos
http://tympanus.net/Development/SelectInspiration/index3.html
http://tympanus.net/Development/SimpleDropDownEffects/
HTML is not modular like that. Importantingly, you're also restricted by the browser support. The only ways to customize the look'n'feel of HTML are CSS and Javascript. There are crossbrowser CSS/JS based UI frameworks available like jQuery UI and several CSS based form solutions with the goal to have the same look'n'feel among the (most) browsers.
You can also consider to develop an Rich Internet Application (RIA) using one of Flex, Air, JavaFX, Silverlight, etc. This way it looks exactly the same in every webbrowser, but that requires at least an additional plugin which the client may have to install first.
http://plugins.jquery.com/project/jNice
http://www.whitespace-creative.com/jquery/jNice/
You may want to customize the images, sizes and CSS with your own.
You could try creating the controls with Flex/Flash and using JavaScript to retrieve the values.
This would allow you to customize the control as much as you wanted while still staying compatible with most users/browsers.