What does the shrink-to-fit viewport meta attribute do?

It is Safari specific, at least at time of writing, being introduced in Safari 9.0. From the “What’s new in Safari?” documentation for Safari 9.0: Viewport Changes Viewport meta tags using “width=device-width” cause the page to scale down to fit content that overflows the viewport bounds. You can override this behavior by adding “shrink-to-fit=no” to … Read more

New Webkits convert decimal comma to ~ dot and vice versa in number-type inputs. Javascript name of that browser feature?

I finally figured it out (after having spent some three days on it). I could have asked the Chrome maker what the Javascript name is, but it would be much better if I could make the browsers behave properly. The broader objective of this question, which is primarily about math forms, is: Consistent interbrowser behavior: … Read more

WebKit CSS content Unicode bug?

This is a bug in WebKit that only got fixed recently (in April 2012). To paraphrase my write-up on escape sequences for CSS identifiers: In theory (as per the spec), any character can be escaped based on its Unicode code point (e.g. for 𝌆, the U+1D306 “tetragram for centre” symbol: \1d306 or \01d306), but older … Read more

CSS3 – How to style the selected text in textareas and inputs in Chrome?

Is a <div> with contenteditable an option? Functions just list a <textarea> for most things. Demo: http://jsfiddle.net/ThinkingStiff/FcCgA/ HTML: <textarea>&lt;textarea&gt; Doesn’t highlight properly in Chrome.</textarea><br /> <input value=”&lt;input&gt; Doesn’t highlight properly in Chrome.” /> <p>&lt;p&gt; Highlights just fine in Chrome!</p> <div id=”div-textarea” contenteditable>&lt;div contenteditable&gt; Highlights just fine in Chrome!</div> CSS: textarea, input, p, div { width: … Read more

Delay mouseout/hover with CSS3 transitions

div { width: 70px; -webkit-transition: .5s all; -webkit-transition-delay: 5s; -moz-transition: .5s all; -moz-transition-delay: 5s; -ms-transition: .5s all; -ms-transition-delay: 5s; -o-transition: .5s all; -o-transition-delay: 5s; transition: .5s all; transition-delay: 5s; } div:hover { width:130px; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } This will trigger the mouseover state right away, but wait 5 … Read more

How do I access an iframe from CasperJS?

Spent forever looking for this, and of course I found the answer minutes after posting the question. I can use the new frame switching commands added to phantomjs in this commit. Specifically, the this.page.switchToChildFrame(0) and this.page.switchToParentFrame() functions. It appears undocumented, and it also seems that the methods have been changed for upcoming releases, but it … Read more