Skip to main content

Home/ HTML5 development/ Group items tagged CSS

Rss Feed Group items tagged

Vernon Fowler

HTML5 Please - Use the new and shiny responsibly - 1 views

  • Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.
  •  
    Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them - with polyfills, fallbacks or as they are.
Vernon Fowler

Web Designer Notebook » How to use Modernizr - 0 views

  •  
    "There is a tool that came to make our lives as progressive web designers a bit easier: Modernizr. In this short tutorial, learn how to apply this handy script to maximum effect on your sites."
Vernon Fowler

:required | CSS-Tricks - 0 views

  • The :required attribute works on radio buttons. If you put required on one radio button (or all), that particular group of radio buttons will be required. On checkboxes, makes each individual checkbox required (to be checked).
Vernon Fowler

html5shiv - HTML5 IE enabling script - Google Project Hosting - 0 views

  • for the sake of performance, it would make better sense to include the CSS first then this script
Vernon Fowler

How You Can Use HTML5 Custom Data Attributes and Why - SitePoint - 0 views

  • Besides the data- prefix, the name of a valid custom data attribute must contain only letters, numbers, hyphen (-), dot (.), colon (:) or underscore (_). It cannot contain capital letters.
  • I recommend you use this method for quick prototypes rather than a production website, not least because CSS-only tooltips are not fully accessible.
Vernon Fowler

Modernizr - 0 views

  •  
    Modernizr adds classes to the element which allow you to target specific browser functionality in your stylesheet. You don't actually need to write any Javascript to use it.
Vernon Fowler

Email Domain Datalist Helper | CSS-Tricks - 0 views

  •  
    "What if someone signs up for your web app and they type in their email address as susan_smith@gmaoil.com? They don't notice, they never get their confirmation email, they never can log in again, the "forgot password" feature doesn't work, and there is a lot of frustration and finger pointing."
Vernon Fowler

Relevant Dropdowns: Polyfill for Datalist | CSS-Tricks - 0 views

  •  
    "The list attribute / datalist element of HTML5 forms is pretty cool. As you type in a text input, it shows you a dropdown menu of choices you can pick from. Or you can type in whatever you want. The list attribute alone doesn't lock you into any specific value. In that way, it's a bit like a group of radio buttons with an "other" type-in option."
Vernon Fowler

Code Guide by @mdo - 0 views

  • Compared to <link>s, @import is slower, adds extra page requests, and can cause other unforeseen problems. Avoid them and instead opt for an alternate approach
  • Compile your CSS with a preprocessor like Sass or Less into a single file
  • Place media queries as close to their relevant rule sets whenever possible.
  • ...3 more annotations...
  • Limit shorthand declaration usage to instances where you must explicitly set all available values.
  • Avoid unnecessary nesting. Just because you can nest, doesn't mean you always should. Consider nesting only if you must scope styles to a parent and if there are multiple elements to be nested.
  • For a complete list of properties and their order, please see
Vernon Fowler

Document Outlines | HTML5 Doctor - 0 views

  • The sectioning elements act quite literally as their name suggests: they define sections of the parent element. These sections can be thought of as child nodes whose headings fall under their parent heading, regardless of their rank.
  • Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section’s nesting level.
  • For accessibility reasons, we recommend each sectioning element have a heading, even <aside> and <nav>, as shown below. If you don’t want these headings to be visible, you can always hide them with CSS.
  • ...2 more annotations...
  • It’s best if you use logical heading levels — <h1>–<h6> — at least until the new outlines are more widely supported.
  • Unfortunately, there is little support for the new outlining algorithms right now. Search engines may be experimenting with it in their crawling algorithms as you read this, but as far as we know, headings are treated just as they were before. You won’t be penalised for using them, even if you use multiple <h1>s (which have always been okay as far as the spec is concerned). Check out our HTML5 and Search Engine Optimisation article for more on search engines and HTML5.
Vernon Fowler

HTML5 and Search Engine Optimisation (SEO) | HTML5 Doctor - 0 views

  • The Doctors’ advice on SEO is to follow Google’s time-honoured guidelines: write valid, cross-browser, accessible HTML, don’t misuse markup or “cloak” with CSS, make a site with a clear hierarchy and text links, and write good content:
Vernon Fowler

HTML5 forms input types | HTML5 Doctor - 0 views

  • Once more, the iPhone recognises type="tel", only this time it goes one step further and completely changes the keyboard to the standard phone keyboard, as shown on the left in Figure 6. In addition to the iPhone, some Android devices (such as HTC Desire, shown on the right in Figure 6) also display a numeric keyboard for type="tel". That’s pretty handy, don’t you think? Nice, big keys for entering a phone number help you to get that big, nasty form completed quickly.
  • In contrast to Opera’s implementation, the iPhone (Figure 8) and some Android devices (such as HTC Desire, shown on the right in Figure 6-13) simply render the field as a standard text box but optimize the keyboard for easy input.
  • Chris’ technique may soon become absolete though with the introduction of the inputmode attribute. The attribute, recently added to the specification will allow users to specify the type of input mechanism that is most useful for users. When implemented, you will be able to choose between numeric, latin, email, or kana input modes.
  • ...3 more annotations...
  • To make the iPhone render with the standard telephone keypad as we saw for type="text" Chris Coyier, of CSS Tricks devised a little hoax you can use. Rather than using type=”number”, use a standard type="text" input and add a pattern attribute that accepts only numbers, as shown below. This solution isn’t ideal but if you think it could be useful, Chris has put a short video together showing it in action. <input type="text" pattern="[0-9]*" name="shoe-size">
  • There are dedicated keys for the @ and . characters to help you complete the field more efficiently. As we discussed with type="search", there is no downside to using type="email" right now. If a browser doesn’t support it, it will degrade to type="text". And in some browsers, users will get a helping hand.
  • The url input type, as you might expect, is for web addresses. You can use the multiple attribute to enter more than one URL. Like type="email", a browser will carry out simple validation on these fields and present an error message on form submission. This is likely to include looking for forward slashes, periods, and spaces, and possibly detecting a valid top-level domain (such as .com or .co.uk). Use the url input type like so: <input type="url" name="url" required>
1 - 20 of 30 Next ›
Showing 20 items per page