Skip to main content

Home/ HTML5 development/ Group items tagged browser

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

HTML5 video and audio tags in all major browsers - 1 views

html5media.info

html video audio tags browsers html5 mobile

shared by Vernon Fowler on 05 Aug 11 - No Cached
  • Vernon Fowler on 05 Aug 11
     
    "How to enable and tags in all major browsers To make HTML5 video and audio tags work in all major browsers, simply add the following line of code somewhere in the of your document. "
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

HTML5 accessibility - 0 views

www.html5accessibility.com

accessibility html5 browser development resources screenreaders web webstandards for:@twitter

shared by Vernon Fowler on 24 Nov 12 - No Cached
  • Vernon Fowler on 24 Nov 12
     
    This site is a resource to provide information about which HTML5 user interface features are accessibility supported in browsers, making them usable by people who rely upon assistive technology (AT) to use the web.
Vernon Fowler

HTML 5 Tag - 0 views

www.quackit.com/...html_summary_tag.cfm

HTML5 summary tag browser support

shared by Vernon Fowler on 12 Mar 13 - No Cached
  • Vernon Fowler on 12 Mar 13
     
    To see if your browser supports the details and summary tags, check http://html5test.com/
Vernon Fowler

Working with HTML5 video in web projects | Adobe Inspire Magazine - 0 views

www.adobe.com/...html5-video.html

html5 css3 javascript video formats browser support

shared by Vernon Fowler on 05 Feb 13 - No Cached
  • The solution for now is to produce your videos in multiple formats. Table 1. Browser support by video format Browser MP4 WebM Ogg Internet Explorer 9 Yes No No Firefox 4.0 No Yes Yes Google Chrome 6 Yes Yes Yes Apple Safari 5 Yes No No Opera 10.6 No Yes Yes Note: For the latest compatibility information, always check the CanIUse website.
  • A more robust way to create the fallback is to use a JavaScript utility like Modernizr to evaluate the browser's capabilities and then dynamically write the video and source tags or embed the Flash video player using SWFObject.
  • Tip 3: The source tag should always include the "type" attribute with the correct MIME type value. You may need to add an .htaccess file to your server to define the MIME types as well. Check out the Video for everybody article for more tips on MIME types.
  • ...2 more annotations...
  • Tip 2: The video tag includes a range of parameters that you can use to configure the video. See the Mozilla article Using HTML5 audio and video for more information.
  • Tip 1: The Adobe Media Encoder does not currently export video to Ogg or WebM format. You can use the Firefogg add-on for Firefox to encode video to Ogg Theora format, or you can use Miro Video Converter to encode video to WebM or Ogg Theora format.
Vernon Fowler

Modernizr - 0 views

www.modernizr.com

javascript web webdesign html browser css webstandards for:@twitter HTML5 CSS3

shared by Vernon Fowler on 04 Feb 12 - Cached
  • Vernon Fowler on 04 Feb 12
     
    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

: The Input (Form Input) element - HTML | MDN - 0 views

developer.mozilla.org/...input

HTML5 form input attributes

shared by Vernon Fowler on 06 Mar 18 - No Cached
  • A single-line text field for entering search strings.
    • Vernon Fowler
      Vernon Fowler on 06 Mar 18
       
      On mobile devices with on-screen keyboards, the search input type sets the submit button text to "Search". On desktop devices, this should also enable submitting the form by pressing the Enter key?
  • Possible values are: off: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method. The browser does not automatically complete the entry. on: The browser is allowed to automatically complete the value based on values that the user has entered during previous uses, however on does not provide any further information about what kind of data the user might be expected to enter. name: Full name. honorific-prefix: Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "Mlle"). given-name: First name. additional-name: Middle name. family-name: Last name.
  • inputmode
    • Vernon Fowler
      Vernon Fowler on 06 Mar 18
       
      Currently not supported in any browser. https://caniuse.com/#feat=input-inputmode
  • ...4 more annotations...
  • This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.
  • minlength HTML5 If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter.
  • maxlength If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter.
  • autocorrect A Safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. Permitted values are: on Enable automatic correction of typos, as well as processing of text substitutions if any are configured.
Vernon Fowler

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

code.google.com/html5shiv

html5 ie browsers html script javascript browser minify

shared by Vernon Fowler on 25 Mar 13 - No Cached
  • It must be included before the <body> element (i.e. in the <head>)
  • minified
Vernon Fowler

Detecting HTML5 Features - Dive Into HTML5 - 0 views

diveintohtml5.info/detect.html

microdata html html5

shared by Vernon Fowler on 27 Oct 12 - No Cached
  • The HTML5 microdata standard includes both HTML markup (primarily for search engines) and a set of DOM functions (primarily for browsers). There’s no harm in including microdata markup in your web pages. It’s nothing more than a few well-placed attributes, and search engines that don’t understand the microdata attributes will just ignore them. But if you need to access or manipulate microdata through the DOM, you’ll need to check whether the browser supports the microdata DOM API.
Alfred Waizenauer

Adobe Puts Focus on HTML5 for Digital Publishing: Collaborates with JQuery and WebKit - 0 views

www.readwriteweb.com/...borates_with_jquery_webkit.php

Adobe HTML5 animation jquery javascript framework

shared by Alfred Waizenauer on 26 Oct 10 - No Cached
  • Alfred Waizenauer on 26 Oct 10
     
    Adobe Edge, as the new tool is called, will allow developers to easily create interactive HTML5 experiences. Adobe also announced a new open JavaScript framework for animations that it will contribute back to the jQuery project, as well as a new collaboration with Google that will bring better layout and typographical fidelity to WebKit-based browsers.
Vernon Fowler

HTML5 Form Validation - Showing All Error Messages - 0 views

www.tjvantoll.com/...ion-showing-all-error-messages

forms usability errors validation HTML5

shared by Vernon Fowler on 10 Apr 18 - No Cached
  • an :invalid pseduoselector that can be used to select all elements with validation errors
  • only give an error for the first field
  • showing the users only the first error message is bad
  • ...2 more annotations...
  • Browsers that support HTML5 form validation have one thing in common; if a <form> is submitted and has errors on multiple fields, the browser will only display the first error to the user.
  • instead of listening for submit on the <form>, I instead listen for a click on the <input type="submit">. Since the user is also able to submit the form pressing enter in text inputs, I attach a keypress listener to them to ensure the same logic runs.
Vernon Fowler

Can I use... Form validation - 0 views

caniuse.com/#feat=form-validation

html5 forms validation CSS pseudo

shared by Vernon Fowler on 15 Feb 18 - No Cached
  • Vernon Fowler on 15 Feb 18
     
    What HTML5 features are currently supported by each browser
Vernon Fowler

- HTML: Hypertext Markup Language | MDN - 0 views

developer.mozilla.org/...number

forms HTML5

shared by Vernon Fowler on 02 Oct 19 - No Cached
  • A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).
  • <input type="number"> elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern.
  • inputs of type number support these attributes
  • Vernon Fowler on 02 Oct 19
     
    " elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries. The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip."
Vernon Fowler

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

html5doctor.com/seo-search-engine-optimisation

html5 seo search engine optimisation search semantic

shared by Vernon Fowler on 10 Dec 12 - No Cached
  • 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

15 HTML5 tutorials which will make you a wow designer - 0 views

www.ahrefmagazine.com/...h-will-make-you-a-wow-designer

HTML5 WebDesigner html tutorials reference mobile browser forms section semantic markup

shared by Vernon Fowler on 11 May 13 - No Cached
  • Vernon Fowler on 11 May 13
     
    #HTML5 Tutorials That Every #WebDesigner Should See http://t.co/k1Xh4VEO @ahrefmag
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.
Vernon Fowler

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

html5please.us

reference html support HTML5 browsers mobile css javascript css3

shared by Vernon Fowler on 23 Jan 12 - No Cached
  • 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 on 23 Jan 12
     
    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.
1 - 20 of 28 Next ›
Showing 20▼ items per page