Top html5 Questions

List of Tags
644
David Murdoch

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too).

But the following CSS doesn't do diddly squat to the placeholder's value:

CSS:

input[placeholder], [placeholder], *[placeholder] {
   color:red !important;
}

HTML:

<input type="text" placeholder="Value" />

Value will still remain grey instead of red.

Is there a way to change the color of the placeholder text?

p.s. I'm already using the jQuery placeholder plugin for the browsers that don't support the placeholder attribute natively.

Answered By: toscho ( 1114)

Implementation

There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

IE up to version 9 and Opera up to version 12 do not support any CSS selector for placeholders.

The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.

CSS selectors

User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:

a group of selectors containing an invalid selector is invalid.

So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

Usage notes

  • Be careful to avoid bad contrasts.
  • Note that placeholder text is just cut off if it doesn’t fit – size your input elements in em and test them with big minimum font size settings. Don’t forget translations: some languages need more room for the same word.
  • Browsers with HTML support for placeholder but without CSS support for that (like Opera) should be tested too.
  • Some browsers use additional default CSS for some input types (email, search). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance and -moz-appearance to change that. Example:

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
    
323
Kristopher Johnson

I'd like to store a JavaScript object in HTML5 localStorage, but my object is apparently being converted to a string.

I can store and retrieve primitive JavaScript types and arrays using localStorage, but objects don't seem to work. Should they?

Here's my code:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
console.log('typeof testObject: ' + typeof testObject);
console.log('testObject properties:');
for (var prop in testObject) {
    console.log('  ' + prop + ': ' + testObject[prop]);
}

// Put the object into storage
localStorage.setItem('testObject', testObject);

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ' + retrievedObject);

The console output is

typeof testObject: object
testObject properties:
  one: 1
  two: 2
  three: 3
typeof retrievedObject: string
Value of retrievedObject: [object Object]

It looks to me like the setItem method is converting the input to a string before storing it.

I see this behavior in Safari, Chrome, and Firefox, so I assume it's my misunderstanding of the HTML5 Web Storage spec, not a browser-specific bug or limitation.

I've tried to make sense of the structured clone algorithm described in http://www.w3.org/TR/html5/infrastructure.html. I don't fully understand what it's saying, but maybe my problem has to do with my object's properties not being enumerable (???)

Is there an easy workaround?

Answered By: CMS ( 448)

Looking at the Apple, Mozilla and Microsoft documentation, the functionality seems to be limited to handle only string key/value pairs.

A workaround can be to stringify your object before storing it, and later parse it when you retrieve it:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));
288
Martin Kool

Apple's iPad Mini is a smaller clone of the iPad 2 in more ways than we'd want. In JavaScript, the window.navigator object exposes the same values for the Mini and iPad 2. My tests so far to detect the difference have not lead to success.

Why is this important?

As the iPad Mini and iPad 2 screens are identical in pixels but vary in actual size (inches / centimeters), they vary in PPI (pixels per inch).

For web applications and games to offer a friendly user interface, certain elements are adjusted in size relative to a user's thumb or finger position, thus, we may want to scale certain images or buttons to provide for that better user experience.

Things I have tried so far (including some pretty obvious approaches):

  • window.devicepixelratio
  • CSS element width in cm unit
  • CSS media queries (such as resolution and -webkit-device-pixel-ratio)
  • SVG drawings in similar units
  • Doing all sorts of CSS webkit transforms for a set time and counting rendered frames with requestAnimFrame (I was hoping to detect a measurable difference)

I'm fresh out of ideas. How about you?

Update Thanks for the responses so far. I would like to comment on people voting against detecting iPad mini versus 2 as Apple has uhm, one guideline to rule them all. Okay, here's my reasoning why I feel it really makes all sense in the world to know if a person is using an iPad mini or a 2. And do with my reasoning what you like.

The iPad mini is not only a much smaller device (9.7 inch versus 7.9 inch), but its form factor allows for a different usage. The iPad 2 is usually held with two hands when gaming unless you're Chuck Norris. The mini is smaller, but it is also much lighter and allows for gameplay where you hold it in one hand and use another to swipe or tap or whatnot. As a game designer and developer myself, I'd just like to know if it's a mini so I can choose to provide the player with a different controlscheme if I want (for instance after A/B testing with a group of players).

Why? Well, it's a proven fact that the majority of users tend to go with the default settings, so leaving out a virtual thumbstick and putting some other tap-based control on the screen (just giving an arbitrary example here) when the player loads up the game for the first time is what I, and probably other game designers, would love to be able to do.

So IMHO this goes beyond the thick fingers / guidelines discussions and is just something Apple and all other vendors ought to do: allow us to uniquely identify your device and think different instead of following guidelines.

Answered By: Avi Marcus ( 204)

Play a stereo audio file and compare the accelerometer response when volume is high on the right channel and on the left channel - iPad2 had mono speakers whereas iPad Mini has built-in stereo speakers.

Need your help to gather the data please visit this page and help me collect data for this crazy idea. I don't have an iPad mini so I really need your help

255
Eikern

I've tried checking other answers, but I'm still confused--especially after seeing W3schools HTML 5 reference.

I thought HTML 4.01 was supposed to "allow" single-tags to just be <img> and <br>. Then XHTML came along with <img /> and <br /> (where someone said that the space is there for older browsers).

Now I'm wondering how I'm supposed to format my code when practicing HTML 5.

<!DOCTYPE HTML>

Is it <br>, <br/> or <br />?

Answered By: Brian Campbell ( 206)

Simply <br> is sufficient.

The other forms are there for compatibility with XHTML; to make it possible to write the same code as XHTML, and have it also work as HTML. Some systems that generate HTML may be based on XML generators, and thus not have the ability to output just a bare <br> tag; if you're using such a system, it's fine to use <br/>, it's just not necessary if you don't need to do it.

Very few people actually use XHTML, however. You need to serve your content as application/xhtml+xml for it to be interpreted as XHTML, and that will not work in IE (it will also mean that any small error you make will prevent your page from being displayed, in browsers that do support XHTML). So, most of what looks like XHTML on the web is actually being served, and interpreted, as HTML. See Serving XHTML as text/html Considered Harmful for some more information.

Google's "Report a Bug" or "Feedback Tool" lets you select an area of your browser window to create a screenshot that is submitted with your feedback about a bug.


Google Feedback Tool Screenshot screenshot by Jason Small, posted in a duplicate question.


How are they doing this? Google's JavaScript feedback API is loaded from here:

https://ssl.gstatic.com/feedback/api.js

Their overview of the feedback module will demonstrate the screenshot capability:

http://www.google.com/tools/feedback/intl/en/learnmore.html

Thanks for your help!

Answered By: Niklas ( 296)

JavaScript can read the DOM and render a fairly accurate representation of that using canvas. I have been working on a script which converts html into an canvas image. Decided today to make an implementation of it into sending feedbacks like you described.

The script allows you to create feedback forms which include a screenshot, created on the clients browser, along with the form. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

It does not require any rendering from the server, as the whole image is created on the clients browser. The HTML2Canvas script itself is still in a very experimental state, as it does not parse nearly as much of the CSS3 attributes I would want it to, nor does it have any support to load CORS images even if a proxy was available.

Still quite limited browser compatibility (not because more couldn't be supported, just haven't had time to make it more cross browser supported).

For more information, have a look at the examples here:

http://hertzen.com/experiments/jsfeedback/

edit The html2canvas script is now available seperately here and some examples here.

edit 2 Another confirmation that Google uses a very similar method, (in fact based on the documentation the only major difference is their async method of traversing/drawing) can be found in this presentation by Elliott Sprehn from the Google Feedback team: http://www.elliottsprehn.com/preso/fluentconf/

I am going to develop an instant messaging application that runs in the browser.

What browsers support the WebSocket API?

Answered By: Cbe317 ( 242)

Client side

  • Hixie-75:
    • Chrome 4.0 + 5.0
    • Safari 5.0.0
  • HyBi-00/Hixie-76:
  • HyBi-07+:
  • HyBi-10:
    • Chrome 14.0 + 15.0
    • Firefox 7.0 + 8.0 + 9.0 + 10.0 - prefixed: MozWebSocket
    • IE 10 (from Windows 8 developer preview)
  • HyBi-17/RFC 6455
    • Chrome 16
    • Firefox 11
    • Opera 12.10 / Opera Mobile 12.1

Any browser with Flash can support WebSocket using the web-socket-js shim/polyfill.

See caniuse for the current status of WebSockets support in desktop and mobile browsers.

See the test reports from the WS testsuite included in Autobahn WebSockets for feature/protocol conformance tests.


Server side

It depends on which language you use.

In Java/JEE:

Some other Java implementations:

In C#:

In PHP:

In Python:

In C:

In Node.js:

  • Socket.io : Socket.io also has serverside ports for Python, Java, Google GO, Rack
  • sockjs : sockjs also has serverside ports for Python, Java, Erlang and Lua
  • WebSocket-Node - Pure JavaScript Client & Server implementation of HyBi-10.

Vert.x (also known as Node.x) : A node like polyglot implementation running on a Java 7 JVM and based on Netty with :

  • Support for Ruby(JRuby), Java, Grovy, Javascript(Rhino/Nashorn), Scala, ...
  • True threading. (unlike Node.js)
  • Understands multiple network protocols out of the box including: TCP, SSL, UDP, HTTP, HTTPS, Websockets, SockJS as fallback for WebSockets

Pusher.com is a Websocket cloud service accessible through a REST API.

DotCloud cloud platform supports Websockets, and Java (Jetty Servlet Container), NodeJS, Python, Ruby, PHP and Perl programming languages.

Openshift cloud platform supports websockets, and Java (Jboss, Spring, Tomcat & Vertx), PHP (ZendServer & CodeIgniter), Ruby (ROR), Node.js, Python (Django & Flask) plateforms.

For other language implementations, see the Wikipedia article for more information.

The RFC for Websockets : RFC6455

When I want to refer to some part of a webpage with the "http://example.com/#foo"-method, which one is The One to use:

<h1><a name="foo"/>Foo Title</h1>

or

<h1 id="foo">Foo Title</h1>

I know that both work, but are they equal, or do they have semantic differences?

Edit: The (X)HTML-dialect I'm working on is HTML5, but don't let that constrain your answers and feel free to answer dialect-agnostically.

Answered By: Greg ( 176)

According to the HTML 5 specification, 5.9.8 Navigating to a fragment identifier:

For HTML documents (and the text/html MIME type), the following processing model must be followed to determine what the indicated part of the document is.

  1. Parse the URL, and let fragid be the <fragment> component of the URL.
  2. If fragid is the empty string, then the indicated part of the document is the top of the document.
  3. If there is an element in the DOM that has an ID exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
  4. If there is an a element in the DOM that has a name attribute whose value is exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
  5. Otherwise, there is no indicated part of the document.

So, it will look for id="foo" followed by name="foo"

Edit: As pointed out by @hsivonen, in HTML5 the a element has no name attribute. However, the above rules still apply to other named elements.

168
Parand

Is it possible to capture or print what's displayed in an html canvas as an image or pdf? I'd like to generate an image via canvas, and I'd like to be able to generate a png from that image.

Answered By: donohoe ( 156)

Oops. Original answer was specific to a similar question. This has been revised:

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");

with the value in IMG you can write it out as a new Image like so:

document.write('<img src="'+img+'"/>');
167
Gaurish Sharma

In order to define charset for HTML5 Doctype, which notation should I use?

a) Short:

 <meta charset='utf-8'> 

b) Long:

<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
Answered By: Quentin ( 104)

In HTML5, they are equivalent. Use the shorter one, it is easier to remember and type. Browser support is fine since it was designed for backwards compatibility.