1 Comment

Responsive WebDesign and How to Disable Media Queries

January 18th, 2013

Horizontal 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.

Comments Off on Hipsters, High resolution and Mother Earth

Hipsters, High resolution and Mother Earth

November 11th, 2012

This 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, wider 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, 2012

The 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:

Make my day
Download Examples CSS
Try it out!
Submit

Read the rest of this entry »

Comments Off on How to get a selection of text with JavaScript

How to get a selection of text with JavaScript

October 31st, 2012

JavaScript 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.

Comments Off on How to create a WOFF font from a True Type font (ttf)

How to create a WOFF font from a True Type font (ttf)

October 29th, 2012

Jonathan Kew made a nice tool to create WOFF fonts very easy.

Just install/compile  it and run:

sfnt2woff font.ttf

As you can see the size of a WOFF file is similar in size to a compressed TTF file.

For example take the free Ubuntu-Regular font:

Size

  • TTF:  345 KB
  • WOFF: 165.8 KB
  • gzipped TTF: 169 KB

The downside of a WOFF is that you can’t install it locally, so you can’t speed up your favourite website by installing its beautiful fonts as a desktop font.

1 Comment

There we go again Nokia / Microsoft discriminating Linux

October 11th, 2012

Nokia made a deal with Microsoft and as a result they mimic old Microsoft behaviour to create webpages that are claimed not to work in Linux, (so that means it’s not based on open web standards) and the same old story is told again, Opera for example is not supported on any platform, Firefox and Chrome aren’t supported on Linux.

http://maps.nokia.com/3D/

Sorry, but for now, 3D Maps only supports the following browsers on Windows and Mac OS:

  • Internet Explorer 7+
  • Firefox 3.5+
  • Chrome
  • Safari 5+

To be simple, the internet is/should be platform independent. Well, webstandards and common sense are, so to rule out an operating system on internet, you have to do something strange.

I would call it misuse of marketpower by Microsoft and because they have a dominating market share on desktop computers, it is simply illegal.

Off course Microsoft has a history of blocking competitors:

  • http://en.wikipedia.org/wiki/Embrace,_extend_and_extinguish
  • http://en.wikipedia.org/wiki/United_States_v._Microsoft
  • http://news.cnet.com/Opera-cries-foul-against-MSN–again/2100-1032_3-983500.html?tag=mncol;txt

In the last case browser sniffing was used to make a competitors product behave inferior. It something like, hey your black, so you can’t enter our restaurant.

After an initial denial, Microsoft on Wednesday said it did send different style sheets to different browsers, and defended the practice.

We have seen his before with Microsoft webpages:

Many people think it’s an old story, and bashing Microsoft has no use, but they seem to miss a couple of things:

We’re not bashing Microsoft, we’re bashing bad behaviour. Web-developers spend a reasonable percentage of their work to support not standard-compliant MS products. This is acknowledged by Microsoft: http://www.ie6countdown.com/

so more websites can choose to drop support for Internet Explorer 6, saving hours of work for web developers.

Of course it’s stated a bit soft, saving 15%-40% costs for developing websites would be a better phrase, which sums up to a couple of billion worldwide. That’s the welfare loss caused by Microsoft`s monopoly, and we all paid that without getting anything in return.

Now even a former Microsoft employee started a firm to help companies to get rid of Explorer 6. That’s ironic. In daily life the only things you have to pay stop using them are drugs. Is Microsoft a drug dealer?

http://www.zdnet.com/blog/ou/s-korean-addiction-to-activex-stalls-vista-adoption/412

Not only does Microsoft former pushing of proprietary technology stall Windows Vista it also blocks Linux and MacOS.

Microsoft did that same trick by pushing Silverlight to show movies and videos. Silverlight is partly to not supported on Linux, so that’s really a competitive advantage for Windows. I never understood, for example, why the Dutch Television got involved with that technology. Or maybe because only by using Silverlight they could broadcast the Olympic Games.

Another thing that is a bit weird, asking webdevelopers/website owners to add this code


!--[if lt IE 7]> <div style=' clear: both; height: 59px; padding:0 0 0 15px; position: relative;'> <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div> <![endif]-->

Simply use HTML 5 and remove additional proprietary code; users will run away from Explorer 6, because when the true power of Explorer browser shined they’re quite useless nowadays: no Ajax, no events.

Explorer 9 is the first decent browser of Microsoft in 10 years, all web-developers know that, somehow they all try to hide that clear fact from internet-users. I don’t know why,  internet users should be aware of this, they are the economical `actors` on the internet/browser-market.

If people care about the environment, or bad behaviour of banks, why shouldn’t they be interested in bad behaviour of big technology firms. Because it’s to complicated, because it’s a booming market? Companies make higher profits on in-transparent markets, they like to confuse consumers, don’t forget that.

No, pushing proprietary standards does mean ruling out competitors. Maybe using proprietary standards in public communication should be forbidden by law, like using pesticides in farming.

We should speak a language that all can learn and use free of cost. That should be a main principal, like freedom of speech.