13 Ways to Browser Test and Validate Your Work - Nettuts+ Every day, when reviewing templates on ThemeForest, I test the submissions for validation and browser compatibility - not to mention my own work as well. Over time, I've scrounged the web for the best validation and browser compatibility testing tools around.
Here's my favorites. HTML and CSS Validation First let's take a look at some methods to check HTML and CSS validation. I should mention that I work on a Mac so these are going to be more Mac biased. Not to worry though, there are many platform independent solutions. Along with validating your files, you should format your markup nicely as well. 1. Probably most commonly known is the online W3C Validation Service. 2. W3C also has a CSS validation service that you're most likely familiar with. 3. The Web Developer toolbar extension for Firefox is very popular and has tons of great features along with some great tools to check HTML and CSS validation. 4. 5.
Most development editors offer some sort of validation tool. 6. 7. 8. 9 & 10. 50 Useful Tools and Generators for Easy CSS Development : Specky. Get down! How to keep footers at the bottom of the page. By Matthew James Taylor on 10 November 2007 When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen.
Web designers are often asked to push footers down to the bottom of the viewport, but it's not immediately obvious how this can be done. When I first ditched tables for pure CSS layouts I tried to make the footer stay at the bottom but I just couldn't do it. See it in action: View my demo with the footer at the bottom The main features Works in all modern, standards compliant browsersCompatible browsers: Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera and Netscape 8Fails gracefully on older browsersOlder non-standards compliant browsers position the footer under the content as per normal.
There is only one limitation You must set the height of the footer div to something other than auto. So how does it work? The HTML div structure The CSS. Safari Web Content Guide: Configuring the Viewport. Safari on iOS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iOS. Configuring the viewport is easy—just add one line of HTML to your webpage—but understanding how viewport properties affect the presentation of your webpages on iOS is more complex. Before configuring the viewport, you need a deeper understanding of what the visible area and viewport are on iOS. If you are already familiar with the viewport on iOS, read “Using the Viewport Meta Tag” for details on the viewport tag and “Viewport Settings for Web Applications” for web application tips.
Otherwise, read the sections in this chapter in the following order: See “Supported Meta Tags” for a complete description of the viewport meta tag. Safari Web Content Guide: Configuring Web Applications. A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms.
For example, you can specify an icon for your web application used to represent it when added to the Home screen on iOS, as described in “Specifying a Webpage Icon for Web Clip.” You can also minimize the Safari on iOS user interface, as described in “Changing the Status Bar Appearance” and “Hiding Safari User Interface Components,” when your web application is launched from the Home screen. These are all optional settings that when added to your web content are ignored by other platforms.
Read “Viewport Settings for Web Applications” for how to set the viewport for web applications on iOS. » Web Development for the iPhone :: CSS, JavaScript and XHTML Ex. Web Development for the iPhone: Targeting the iPhone Safari browser Developing for the iPhone Also check out Creating native looking iPhone web apps with CSS3 (no images). That works on the iPhone and Safari 5 only. Also see CSS, XHTML and JS support in the iPhone. It’s way more relevant than this article, which is about v1. The Safari iPhone user agent string is:Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3Platform string: (iPhone; U; CPU like Mac OS X; en)Version string: Version/3.0 Mobile/1A543a Safari/419.3 To target the iPhone with CSS, use: <!
The logic of this is that only browsers that understand screen understand only, and of these, only the iphone has a max-device-width of 480px. To target the iPhone server-side with PHP you can use: if (stripos($_SERVER['HTTP_USER_AGENT'], 'iPhone')) {} :hover pseudoclass on the iPhone iPhone Viewport Orientation The iPhone supports both landscape and portrait views. Notes: Useful code snippets to develop iPhone friendly websites. Detect iPhones and iPods using Javascript When developing for the iPhone and the iPod Touch, the first thing we have to do is obviously detect it, so we can apply specific code or styles to it.
The following code snippets will detect iPhones and iPods using Javascript, and redirect those users to an iPhone specific page. Source: Detect iPhones and iPods using PHP Although the previous snippet works great, Javascript can be disabled on the iPhone. For this reason, you may prefer to use PHP in order to detect iPhones and iPods touch. Set iPhone width as the viewport How many times did you load a website in your iPhone and it just looked like a thumbnail? Source: Insert an iPhone specific icon When a user adds your page to the home screen, the iPhone will automatically use a screenshot of your website as an icon. Prevent Safari from adjusting text size on rotate. What HTML/CSS would you use to create a text input with a backgr. Picment.com » Articles » CSS » Fun with forms – customized input. By Søren Madsen Ever wanted to match the look of your HTML forms with the rest of your website? This article demonstrates how to apply customized backgrounds to HTML forms, while preserving stucturally clean markup and accesibility.
A few considerations before we begin Before you throw yourself at this, there are some important considerations you have be aware of. Usability Users trust their credit card and personal information with forms on the internet, and that trust is sacred. So changing the appearance of well-known and recognizable browser elements like the basic input elements, may therefore not always be advisable. Differences in user agents The techniques we're about to demonstrate are not generic . Most popular browsers have however provided us with options to do so, but not all of them. So what are we left with? Logical restrictions With this technique, we basically hide the given form element, and replace it with graphic backgrounds.
Some form basics – the and elements – the element. XSLT Tryit Editor v1.0. 9 Most Common IE Bugs and How to Fix Them - Nettuts+ Internet Explorer - the bane of most web developers' existence. Up to 60% of your development can be wasted just trying to squash out IE specific bugs which isn't really a productive use of your time. In this tutorial, you are going to learn about the most common IE bugs and rendering disparities and how to easily squash them or deal with them. Interested? Let's get started. 1. Centering an element is probably something every web developer has to do while creating a layout. Consider the Following Code: The output you'd expect: But what IE actually gives you: This is mainly due to IE6 in quirks mode and below not recognizing the auto value we set to the margin property. The Fix The easiest and most reliable way to center content for IE6 and below is to apply text-align: center to the parent element and then apply text-align: left to the element to be centered to make sure the text within it is aligned properly. 2.
Almost every web developer uses lists to create his navigation. Fix #1 Fix #2 3. Optimizing Page Load Time. However, for many sites that reference dozens of external objects, the majority of the page load time is spent in separate HTTP requests for images, javascript, and stylesheets. AJAX probably could help, but speeding up or eliminating these separate HTTP requests might help more, yet there isn't a common body of knowledge about how to do so. While working on optimizing page load times for a high-profile AJAX application, I had a chance to investigate how much I could reduce latency due to external objects. Specifically, I looked into how the HTTP client implementation in common browsers and characteristics of common Internet connections affect page load time for pages with many small objects. I found a few things to be interesting: IE, Firefox, and Safari ship with HTTP pipelining disabled by default; Opera is the only browser I know of that enables it.
Interesting things to note: Interesting things from that graph: Measuring the effective bandwidth of your users <html><head><title>... DarkPatterns.org. W3C: Hold off on deploying HTML5 in websites | Developer World. HTML5, which updates the HTML specification to accommodate modern Web applications, has gained a lot of adherents in vendors like Microsoft, Google, and Apple. But the specification is plain not ready yet for deployment to websites, an official with the World Wide Web Consortium (W3C), which oversees HTML5, stressed this week. "The problem we're facing right now is there is already a lot of excitement for HTML5, but it's a little too early to deploy it because we're running into interoperability issues," including differences between video on devices, said the official, Philippe Le Hegaret, W3C interaction domain leader.
He is responsible for specifications like HTML and SVG (Scalable Vector Graphics). [ See InfoWorld's reports on how to use HTML5 on your website today today, whether HTML5 will kill off Flash and Silverlight and how HTML5 will change the Web. | Keep up with app dev issues and trends with InfoWorld's Fatal Exception blog and Developer World newsletter. ]