Archive for the ‘HTML5’ Category

3 Comments

Fixing the iPhone CSS hover problem on iOS

Wednesday, November 6th, 2019

Mobile phones don’t have a mouse, your fat fingers kinda act like a giant mouse.

There is major difference: a mouse can click, drag and  hover above the screen, while your finger can click and swipe, but not hover. Well they can, but nothing is happening then.

So those nice old style CSS-only dropdown menu’s won’t work on your phone, because the depend on :hover.

They work on Android or Firefox browsers, as those browser developers looked for compatibility, and made a click with your fingers act like hover on elements that are not a link.
That is smart thinking, and good care for compatibility. Keep old sites working.

But they don’t work on iPhone or mobile Safari, so we need a solution for that.

Plain HTML is and has always been responsive. It’s the CSS that destroyed it, by setting explicit width.  Well there was no max-width, so designers had not much choice. But remove all CSS and magically your HTML will be responsive, except for tables and large images, but at least you can scroll them into sight so everything is still accessible.

Pity the Apple people. An iPhone with mobile Safari doesn’t do :hover, breaking compatibility for old sites, and forcing webdevelopers to use `Javascript`  for these trivial things. Annoying.

There are examples on the internet how to fix that, like adding an onclick attribute to every element you want the :hover rule for, but that’s adding a lot of code, and the elements the don’t hide again when you click somewhere else.

We need better solutions!

How to make :hover  work on Safari iOS on iPhones and iPads.

Here are a few very simple options, that I came up with having a new iPhone 11 around for a couple of days. Tested on the latest iOS 13.
(more…)

No Comments

Sorting with grid

Wednesday, April 12th, 2017

A while ago we showed you a way to use flexbox for sorting lists and tables. This month the powerful CSS Grid layout system went unprefixed in all major browsers.

In short Grid is for two dimension grids, while Flexbox is better suited for one dimensional layouts, like a nav bar. They can work together, a grid cell can be a flexbox container and vice versa.

The grid system is rather easy to grasp, it doesn’t have much surprises.

Let’s go over to the sorting trick:

Just push the buttons or table header to sort the stuff.

How does it work

Sort the elements on text and write the grid order attribute for CSS.

<li style="grid-row-start: 7;">scstqehfr</li>

The main `win` of css sorting is you don’t need to modify the DOM, which is expensive in most browsers. That said, you need some CSS trickery to get tables look like tables at the moment a tbody has a grid or flexbox display-layout.

Read more about the Basic concepts of grid layout here.

1 Comment

Breaking the bad, pushing a worse internet (part II)

Sunday, June 21st, 2015

In an earlier post we lamented the behavior of multinationals by dropping noble classic Internet principles like Graceful degradation and progressive enhancement to strengthen their business model at a high security and privacy cost for users.

Go to a site with JS disabled and you see Nada. Zilch. On Google, on Twitter, Facebook tells us it can do much without JS. Nonsense, that is their policy, it’s not your fault.

(more…)

No Comments

Sorting with Flexbox

Wednesday, August 13th, 2014

The Flexible Box Layout Module is a very powerful tool to style your webpages. It offers simple solutions for things like `the Holy Grail`

Here we do a dirty sorting trick:

Just push the buttons or table header to sort the stuff.

How does it work

Sort the elements on text and write the order attribute for CSS.

<li style="order: 7;">scstqehfr</li>

Then set the elements to display flex on the ol element:

.sorted{
display:flex;
flex-flow:column;
flex-direction:column;
}

Be aware:

Sorting this way is kind of superficial, it’s only ordered through CSS: It will show the elements in different order, but in the DOM there is no change at all. So traversing or accessing elements can be surprising, it will go in original/DOM order.

Sorting an table through Flexbox ruins the layout, because it resets the display property from `table-*` to `flex-*`. An additional trick to write the width explicitly is needed to maintain layout.

No Comments

Spinners and sliders with just native javascript

Thursday, April 5th, 2012

In an earlier post we waved goodbye to jQuery UI for animations. CSS transform and transitions are more powerful, easier to maintain, hardware accelerated, and last but not least less code.

And you could save bandwidth by not loading jQuery UI.

And now I have rewritten the former example to drop jQuery, and believe it or not, it’s even less inline Javascript code. Sure the former example wasn’t really clever programmed – now we use event delegations – but it’s quiet astonishing that using native JS requires less code then the former jQuery example. And of course one library less to load.

Why can we drop jQuery in a lot of cases?

Because CSS animations aren’t working in old browsers anyway, so it doesn’t matter that don’t understand the latest HTML5/ECMA Script 5 / Javascript additions. That’s what graceful degradation means. No eye-candy for older browsers.

Important HTML5/ECMA Script 5 / Javascript additions:

  • classList api: easy toggling, adding and removing of classes.
  • document.querySelectorAll, the native selector API,  get you’re DOM elements like the way you do with CSS
  • new powerful array functions, like forEach etc.
  • even Microsoft products (Explorer 9) now support Javascript specs: like addEventListener, XMLHttpRequest,  javascript objects instead of ActiveX objects etc.
  • innerHTML, outerHTML
  • DOM traversal

Above list is not complete, but in most cases jQuery was used for things like, binding events, toggling classes, selecting elements, add elements, and ajaxify sites.

Here is the new example

And the used Javascript code:


(function(){
var spinner = document.getElementById("spinner"),i=null
spinner.addEventListener('click', function(event){
// event.preventDefault()
// event.stopPropagation()
// which element is the target
i = Array.prototype.indexOf.call(spinner.children, event.target);
// if(window.console) console.log(i,event)
switch(i){
case 1:
// clicked left, pop -> unshift
spinner.insertBefore(spinner.lastElementChild, spinner.firstElementChild)
break;
case 3:
// clicked right shift -> push
spinner.appendChild(spinner.firstElementChild)
break;
default:
}
// Opera bug workaround
spinner.classList.toggle('operabug')
}, false);
})()

Caveats

The Opera bug with DOM mutations and CSS transform/transitions isn’t resolved yet unfortunately. Somehow the DOM mutations don’t seem to trigger a reflow.

UPDATE: there is an easy fix for the Opera Bug, trigger a reflow by setting a bogus class on any element:

// Opera bug workaround
spinner.classList.toggle('operabug')

No Comments

CSS vendor prefix issues

Thursday, February 16th, 2012

Vendor prefixes are the verbose code you see in new `HTML5` sites, in which browser vendors test their new CSS3 rules, when specs are in proposal time or under development.

Something like:


-o-transition: opacity 1s ease-in 1s; //opera
-moz-transition: opacity 1s ease-in 1s; /firefox
-ms-transition: opacity 1s ease-in 1s; // internet explorer
-webkit-transition: opacity 1s ease-in 1s; // safari , chrome
-khtml-transition: opacity 1s ease-in 1s; // konquerer , linux
transition: opacity 1s ease-in 1s; // all when it's official spec

The problem is that most developers seem to do just this:

-webkit-transition: opacity 1s ease-in 1s; // safari , chrome

So they only support webkit browsers and that is plain dumb. At least you should always add the rule without any prefix. That means eventually it will work in every browser that supports it.
Typing all the rules is a pain in the ass, so most developers only do webkit, probably also because Apple invented quite a lot for transitions etc. At that time it was not supported by any other browser, so why on earth should you add code that has no meaning. Well because you care about the future and care about different minded people.

Two helpful solutions

First there are macro’s for IDE’s to type one rule and auto generate the other ones. Here is a CSS vendor prefix macro for Netbeans. Not much of a hassle.

Secondly you can call userJS to the rescue, userJS is like userCSS a rather underestimated part of the internet, but yet a very valuable one. It let you overrule CSS rules or run own JS in websites.

For Opera add this as a userJS:

opera.addEventListener('BeforeCSS', function(userJSEvent){
userJSEvent.cssText = userJSEvent.cssText
.replace(/-(moz|ms|webkit|o)-(border|text-overflow)/g,'$2')
.replace(/-(moz|ms|webkit)-(gradient|transform|transition)/g,'-o-$2');
}, false);

Source here

It will automatically rewrite all -webkit- rules to -o-  rules in Opera, so all the webkit  demo’s will start to work. (if Opera supports them)

Caveats

  • Code (css specs) can change during development.
  • Implementations differ between vendors.

Of course these are workarounds, I still think developers should add all vendor prefixes to their code. It can be automated in an IDE like with mentioned macro for Netbeans or in deployment.