No Comments
Cheer Presto Prestissimo to the great Opera Singer
February 13th, 2013I just posted this on the Opera Wishlist forum:
Please keep Opera Classic (=Opera Presto) around for some time(years) with just necessary security patches applied.
In honour of those who shed sweat and tears to design and build it, and for those that used it daily for work or leisure and for those that simply loved it.
Also keep it available because we need it as a testing tool, we need browser engine diversity. Opera Presto is one of the best standard compliant engines.
And most important, because we (developers) need it to test our `graceful degredation` and `progressive enhancement` skills: If our future developed sites aren’t accessible in `Opera Classic` we know we failed.
To all internet artists tweeting their songs: if your work doesn’t sound in the classic Opera, keep practising.
1 Comment
Responsive WebDesign and How to Disable Media Queries
January 18th, 2013Horizontal scrolling is nasty, on both desktop and phones, so Responsive WebDesign comes in hand to adapt the width of a webpage to the width of a screen. That’s in the interest of most users.
But although the adagium “Mobile First‘ has won ground lately which, more or less, made websites look simpler and made them more focused on content, a lot of websites keep there overloaded layout and simply hide content for mobile phones with media queries. In those cases it would be nice if you can disable/kill media queries to access the other content.
Bruce Lawson wrote an article about whether or not it would be nice to have native support for disabling RWB (Repsonsive Web Design). I guess, yeah, it would be nice, but why not add a disabled property to the specs/implementation for the CSSMediaRule-object. That would make it easy.
Access CSS and Stylesheets in javascript
To disable a (first) stylesheet, simply do this:
document.styleSheets[0].disabled
Yes, you can toggle them on/off with javascript.
A styleSheet has a CSSRules property which contains a list of CSSStyleRule-objects and CSSMediaRule-objects. The first are CSS-rules, the second mediaqueries, which have a CSSRules property with a collection of CSSRules.
CSS tree
document.styleSheets[0]
- cssRules
- CSSStyleRule
- cssText "body {max-width:80%;}"
- CSSMediaRule "@media screen and (max-width: 800px) {...}
- cssRules
- CSSStyleRule
- cssText "body {width:100%;}"
Unfortunately nor a CSSStyleRule nor a CSSMediaRule-object has a `disabled` property. With other words, you can’t toggle them on/off.
A pity.
Bookmarklet
A simple bookmarklet/scriplet can do the job now, but using the proposed disabled property can make the code cleaner:
Disable MediaQueries / Responsive Webdesign
The code
[].slice.call(document.styleSheets).forEach(function(sheet) {
[].slice.call(sheet.cssRules).forEach(function(rule) {
if (rule.media){ rule.cssText = rule.cssText.replace(/(screen|all|handheld)/, "**$1**");}
});
});
It wouldn’t be that difficult to write an extension, that let you choose which mediaquery to disable. I might just do that this weekend.
No Comments
Hipsters, High resolution and Mother Earth
November 11th, 2012This post is about the discrepancy between a superfast internet – responsive images, high resolution displays, connection speed, HD video – and the economical footprint.
Nowadays there is a major buzz about the web that should serve the right image for the right device: a very detailed image for a high resolution (Retina) displays, a small, less detailed images for mobile phones on slow (3G) connections and, more detailed images for smartphones on fast WIFI connections.
Most discussed arguments are about resolution, connection type, speed, bandwidth and latency. What I miss is the economical part of the issue: money and `ecological footprint`. Sometimes you pay per MB on mobile networks (3G), or on WIFI-networks at airports or hotels. I guess you’re happy with a low resolution advertisement image when you can save a couple of euros.
Not only real money, they’re other, so called external costs. Cost that are not paid for by the user. I still feel that watching a HD movie on YouTube has a bigger ecological footprint then a low resolution movie. It needs more servers, a bigger harddisk, more bandwidth, in short more energy and hardware, so it raises the bill. But in real life you probably don’t pay extra for it, maybe some waiting-time, because most providers offer `flat fee` subscription.
So Hipsters, if you do care about the Environment, better watch your internet movies on low resolution screens. Don’t buy the new Apple Retina screens, they’re the Hummers of the internet.
That said, they just started to talk about cost in the specs, and they call it, euphemistically, a metered connection and describe it as an outstanding issue that is hard to implement.
As said before, most internet services are now provided as flat fee. I wonder if, and when, we will have actually start paying for real usage (Mbs). It’s economically a good idea, pay for what you get, and it will actually help to solve a couple of problems (hard to implement). Let’s see how fast problems are solved once you have to pay for it.
Maybe we will, some marketing theory claims you should raise the price, once you have a saturated market. For mobile internet, you actually pay a lot lately in the Netherlands, no flat fee anymore. There is no fun in YouTube, it’s fucking expensive, the old newspaper is a bargain.
1 Comment
Shiny buttons with CSS3 radial gradients
November 1st, 2012The current syntax for CSS3 radial gradients is as follows:
radial-gradient(<shape> <size> at <position-x> <position-y>, <color-stop> [,<color-stops>] )
The older specification was:
radial-gradient(position,size and shape,color stops);
This post is about creating glossy CSS3 buttons with just one partial transparent radial gradient that can be re-used for several colors:
No Comments
How to get a selection of text with JavaScript
October 31st, 2012JavaScript is a language full of surprises, sometimes it’s dead simple, sometimes it’s complex or counterintuitive. In its early years it was considered as a toy for making wacky DHTML effects on pages, but it actually has elegant and powerful capabilities. Actually most problems rise out of cross-browser issues, and proprietary implementations for the DOM extensions.
To get a selection of text – user selected text by the user that can be copied to the clipboard – can be accessed by JavaScript as easy as this:
document.getSelection()
//document.getSelection().toString()
Wow, but it wouldn’t be this world if there aren’t any cross-browser issues.
The downside: It works for normal text on pages, but it doesn’t work for input or textarea elements in Firefox or Opera. It does work in Chromium in all cases.
For Firefox or Opera you need this, slightly more complex, code:
// get active Element
var el = document.activeElement, start = el.selectionStart, end = el.selectionEnd;
var selection = el.value.substring(start, end);
Wouldn’t it be nice if Firefox and Opera make document.getSelection() work like Chromium?
Yes, I guess, but there is another quirk. In Opera you can have multiple selections, you can select text in a texarea field, and leave that selected while you copy text somewhere else. I’m not sure why that is, sometimes confusing sometimes it’s convenient.