background preloader

Have a Field Day with HTML5 Forms

Have a Field Day with HTML5 Forms
Forms are usually seen as that obnoxious thing we have to markup and style. I respectfully disagree: forms (on a par with tables) are the most exciting thing we have to work with. Here we’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques. I promise you will want to style your own forms after you’ve read this article. Here’s what we’ll be creating: The form. Meaningful markup We’re going to style a simple payment form. The person’s details The address details The credit card details We are also going to use some of HTML5’s new input types and attributes to create more meaningful fields and use less unnecessary classes and ids: email, for the email field tel, for the telephone field number, for the credit card number and security code required, for required fields placeholder, for the hints within some of the fields autofocus, to put focus on the first input field when the page loads A good foundation The unstyled form Form controls

The Current State of HTML5 Forms · Wufoo The Introduction HTML5 is the newest specification for HTML, the language that web browsers read to display web pages. HTML5 has many new features intended to make creating websites easier and people's experience in using those websites better. Among those features are many enhancements to web forms. Support for HTML5 web form features is improving, but not all web browsers support HTML5 features the same way. This page is intended to explore those new new features and help you understand which browsers are supporting which features and to what degree. The charts below list the most current version of each major browser. About Browser Versions In these charts, a version number like "4" means "the very first release of version 4 of this browser". JavaScript and HTML5 Forms Testing for Support If you intended to write JavaScript to mimic the functionality of HTML5 forms, you may want to first test the current browsers capability and write the JavaScript as a fallback. // Usage if (!

CSS Specificity And Inheritance - Smashing Magazine - StumbleUpo Advertisement CSS’ barrier to entry is extremely low, mainly due to the nature of its syntax. Being clear and easy to understand, the syntax makes sense even to the inexperienced Web designer. It’s so simple, in fact, that you could style a simple CSS-based website within a few hours of learning it. But this apparent simplicity is deceitful. Understanding a few often overlooked concepts is also important. Two of these concepts are specificity and inheritance. The notion of a “cascade” is at the heart of CSS (just look at its name). Please consider reading our previous related article: CSS Specificity: Things You Should Know 1. Style sheets can have a few different sources: User agent For example, the browser’s default style sheet.User Such as the user’s browser options.Author This is the CSS provided by the page (whether inline, embedded or external) There is also the ! Knowing this, let’s look at the final order, in ascending order of importance: 2. 2.1 How to Calculate Specificity? 3. 4. 5.

Multiple Backgrounds with CSS3 Home / CSS3 Previews / Multiple Backgrounds with CSS3 CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list. Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature. Here’s a basic example: This box has two background images, the first a sheep (aligned to the bottom and center) and the second a grass and sky background (aligned to the top-left corner). Here’s the code for this: How it Works Multiple background images can be specified using either the individual background properties or the background shorthand property. Specifying multiple backgrounds using the individual background properties Multiple background images are specified using a comma-separated list of values for the background-image property, with each value generating a separate ‘background layer’. = | none

Microsoft WebCamp HTML5 » Evilznet.com Ce mercredi 16 mars j’ai assisté au WebCamp HTML5 chez Microsoft présenté par David Rousset, Aurélien Verla, Glovanni Clément et Sébastien Doncker. Je ne vais pas vous rapporter l’ensemble des infos qui nous ont été présentées, je vais sélectionner ce qui me semble le plus important et en profiter pour y intégrer mon point de vue (complètement personnel). Que faut-il comprendre par HTML5 ? Quand on entend parler d’HTML5 il est souvent sous-entendu HTML5 et ses amis. Il s’agit finalement d’un ensemble de techno/produits utilisés pour le Web dans les navigateurs « moderne ». Ou en est-on ? Avant de donner l’état d’avancement d’HTML5, un bref rappel sur ce qui s’est passé ces dernières années est nécessaire : Le W3C, groupe connu de tous, qui s’occupent de spécifier les standards Web, travaillait depuis bien longtemps sur une version XHTML2 devant succédé à XHTML1.1 ou HTML4. Le W3C c’est : 442 membres, dont pas mal de Microsoft. Bon alors on peut faire quoi ?

Hack for CSS3 Supporting Browsers Hack for CSS3 Supporting Browsers Posted By Estelle Weyl on April 6, 2010 Implementing CSS3 features in your CSS file can be complex. selector:nth-of-type(1n) To target all browsers that support CSS3, and hide from the IEs, simply add :nth-of-type(1n) to your selector. In the above example, we’ll end up with white text on a white background, with the letters being defined by the drop shadow. :nth-of-type(1n) basically means “every”. For example, I have a row of images with captions going across a page. The images look fine in IE, but look cool in FF3.6 Do make sure that the new CSS3 property is generally supported before using this hack. About The Author Estelle Weyl My name is Estelle Weyl.

Jardin Zen css - 1xHTML, nxCSS So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. CSS allows complete and total control over the style of a hypertext document. Participation Strong visual design has always been our focus. You may modify the style sheet in any way you wish, but not the HTML. Download the sample HTML and CSS to work on a copy locally. Benefits Why participate? Requirements Where possible, we would like to see mostly CSS 1 & 2 usage. Luckily, designing this way shows how well various browsers have implemented CSS by now. We ask that you submit original artwork. This is a learning exercise as well as a demonstration. By Dave Shea.

Avec la sortie d’IE9, HTML5 devient enfin une réalité J’ai déjà eu de nombreuses occasions de vous expliquer dans quelle mesure HTML5 et CSS3 allaient révolutionner les interfaces web : CSS3 et javascript seront-elles les technologies RIA du future ?. Cette révolution est maintenant définitivement amorcée avec le lancement cette semaine de la version 9 d’Internet Explorer : IE9, Beauty of the Web. Est-ce réellement la dernière version du navigateur de Microsoft qui va révolutionner le marché ? Non pas réellement. Dès la semaine prochaine, Windows proposera la mise à jour vers IE9 de façon automatique (Internet Explorer 9 to be forced on world March 21st via Windows Update) ;Microsoft ne va pas tarder à annoncer la fin officielle d’IE6 (The Internet Explorer 6 Countdown, Moving the world off Internet Explorer 6) ;Firefox (le concurrent direct) va enfin sortir sa version 4. Ce n’est donc pas IE9 qui va bousculer le marché, mais sa sortie effective. Non, IE9 n’est pas plus performant que les dernières versions de Chrome ou Firefox.

7 New Essential CSS 3 Techniques Revealed | tripwire magazine There are several new and exciting functions and features being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, etc… This article presents 7 New CSS3 techniques that every web designer and developer should be aware of. CSS3 for sure will leads to greater flexibility and make effects that was previously complex and difficult to create much easier. Unfortunately it is not currently all the leading browsers that support CSS3. In some cases other techniques are available making our life easier while waiting for CSS3 to break through and these will be briefly covered as well. Advertisement Be aware that CSS3 features are not yet accessed directly in most browsers and in some it is not even implemented at all, ex. Border Radius: Create rounded corners There are many ways to create rounded corners on boxes. The good news is that W3C has offered some new options in CSS3. See working example here. Anti-aliased Rounded corners with JQuery

CSS2 A l'heure où les anciennes versions d'Internet Explorer disparaissent, il devient plus que temps de s'ouvrir aux secrets d'un langage malheureusement trop peu connu : CSS2, ou plus précisément CSS2.1. De larges parties de CSS2 ont été occultées en raison des faiblesses d'IE6 puis d'IE7. Le marché actuel nous offre enfin la possibilité, au cas par cas, de négliger ces anciennes versions du navigateur de Microsoft. Les possibilités offertes par CSS2 sont bien plus vastes que vous ne l'imaginez… Un monde sans Internet Explorer 6 Selon les statistiques européennes, le vénérable ancêtre IE6 ne représenterait aujourd'hui que 2% du marché. min-width, max-width, min-height, max-height Les propriétés de minima et maxima, reconnues dès IE7, facilitent la vie et évitent l'usage de JavaScript dans de nombreux cas de figure : :first-child La pseudo-classe CSS2 :first-child offre la possibilité de cibler uniquement le premier élémént au sein de son parent. :hover Sélecteur d'enfants (A > B)

Jeff Prosise's Blog : Using HTML5 Web Storage for Interprocess Communication One of the exciting new features coming in HTML5 – and one that works in most HTML5 browsers today – is Web storage. The latest draft of the specification defines two types of Web storage: local storage and session storage. Local storage, which is analogous to isolated storage in Silverlight, persists data across browser sessions, and does it purely on the client side. Local storage is accessed through the browser’s window.localStorage property. if ("localStorage" in window && window["localStorage"] ! // Local storage supported Not surprisingly, browsers are somewhat inconsistent in how they respond to this query. Once you’ve ascertained that local support support is there, you can write to it using window.localStorage.setItem and read from it using window.localStorage.getItem. Here’s a simple example demonstrating how to write a string to local storage and read it back: // Write to local storage localStorage.setItem("language", "en-us"); // Read from local storage localStorage["index"] = 0;

CSS3 Gradient Buttons Last week I talked about Cross-Browser CSS Gradient. Today I'm going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc. What Is So Cool About These Buttons? Pure CSS: no image or Javascript is used. Preview The image below shows how the button will display in different browsers. Button States normal state = gradient with border and shadow styles. hover = darker gradient active = gradient is reversed, 1px down, and darker font color as well. General Styles For The Button The following code is the general styles for the .button class. Color Gradient Styles The code below is the CSS styling for the orange button.

css - Relative width and padding on same element - responsive web design How to get all the browsers playing ball This post was of course an April Fool's Day joke, check the post date ;) We can but dream of having a script like this one day. Oh and if you haven't checked out what the script does do, you really should, it's awesome. At the beginning of the year, all seven of the HTML5 Doctors met up and started to discuss the problem of browser support within the realm of HTML5, CSS3 and all the sexy new APIs. In the last year, riding the popularity of HTML5, a great number of JavaScript polyfills/shim/shams/what-have-you have been released, and the Modernizr project even maintains a list of these scripts. But we've gone one step further. What if you could include a single JavaScript library, and it automatically detected the state of the browser support for the latest technology, and where the browser is lacking, the JavaScript library plugs the missing gaps. An über polyfill library if you will! That's exactly what we've been working on for the last few months. The Über Polyfill That's it. And so on.

CSS in Depth: Floats and Positions | Spyre Studios Last week, in the first of our CSS In Depth post, we discussed the difference between paddings and margins, and what the box model is. This week we’ll be discussing positions and floats as well as what the differences are and when it’s best to use them. Both floats and positions deal with the relationship of elements between each other. What Is Position? Position rules are used to position the element in the document flow. Elements that are position can be moved around using the left, top, bottom and right rules and a pixel or percentage value. If an element is not positioned inside of another positioned element, the left, top, bottom and right rules will calculate their values using the browser window. However, if we position that element inside of another positioned element with a left of 20px, the 20px will be calculate from the left side of the element, not the browser window. Positioning seems to work well in IE with little bugs, however I generally use positioning as a last resort.

Related: