Skip to main content

Home/ HTML5 development/ Group items tagged rendering

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

HTML5 iframe Tag - 0 views

www.w3schools.com/...tag_iframe.asp

iframe HTML5 attributes support browser rendering Internet Explorer IE

shared by Vernon Fowler on 04 Feb 12 - No Cached
  • Vernon Fowler on 04 Feb 12
     
    Be wary of any plugins that create iframe elements. If they use invalid attributes, the iframe won't render in Internet Explorer (IE).
Vernon Fowler

HTML5 forms input types | HTML5 Doctor - 0 views

html5doctor.com/html5-forms-input-types

html HTML5 forms input data types browser mobile

shared by Vernon Fowler on 05 Mar 13 - No Cached
  • 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>
Vernon Fowler

Microdata - Dive Into HTML5 - 0 views

diveintohtml5.info/extensibility.html

HTML5 microdata

shared by Vernon Fowler on 27 Oct 12 - No Cached
  • a third option developed using lessons learned from microformats and RDFa, and designed to be integrated into HTML5 itself: microdata.
  • “Adding microdata” to your page is a matter of adding a few attributes to the HTML elements you already have.
  • So where is the real information? It’s in the <dd> element, so that’s where we need to put the itemprop attribute. Which property is it? It’s the name property. Where is the property value? It’s the text within the <dd> element. Does that need to be marked up? the HTML5 microdata data model says no, <dd> elements have no special processing, so the property value is just the text within the element.
  • ...7 more annotations...
  • This technique is also useful for microdata. There are two distinct pieces of information here: a title and an affiliation. If you wrap each piece in a dummy <span> element, you can declare that each <span> is a separate microdata property.
  • There are two major classes of applications that consume HTML, and by extension, HTML5 microdata: Web browsers Search engines
  • Google supports microdata as part of their Rich Snippets program.
  • a handy tool to see how Google “sees” your microdata properties
  • Just like associating a URL with a Person, you can associate a URL with an Organization. This could be the company’s home page, a contact page, product page, or anything else. If it’s a URL about, from, or belonging to the Organization, mark it up with an itemprop="url" attribute.
  • To handle edge cases like this, HTML5 provides a way to annotate invisible data. This technique should only be used as a last resort. If there is a way to display or render the data you care about, you should do so. Invisible data that only machines can read tends to “go stale” quickly. That is, someone will come along later and update the visible text but forget to update the invisible data. This happens more often than you think, and it will happen to you too.
  • itemscope says that this element is the enclosing element for a microdata item with its own vocabulary (given in the itemtype attribute). All the properties within this element are properties of http://data-vocabulary.org/Geo, not the surrounding http://data-vocabulary.org/Organization.
1 - 4 of 4
Showing 20▼ items per page