Browser compatibilty

[eltonmesquita]

My main concern, besides the performance, is browser compatibility.
I believe that all modern desktop and even older browser support custom attributes without a problem. But I don't know much about mobile browsers, mainly the under dogs like opera mobile and the ones in legacy phones. It would be good to also document the odds that might occur.

Shouldn't we create a test page and make a list of all the browsers tested with the results?
I think this way people won't be afraid of use AMCSS.

I'll start my testing as soon as I can as I just found it incredible and shared a lot of your thoughts and concerns about classes and the traditional way of authoring CSS.

[zachj0hnston]

@eltonmesquita I had a similar concern. Please do share your test findings with us or let us know if you won't have time to do this so someone else can take over.

[geelen]

Yeah, it would be nice to run a test page through something like @saucelabs or something, in the future. For now, I haven't come across a browser that can't style custom attributes.

[eltonmesquita]

@johnzach I can't garantee I'll have the time to do everything, but for sure I'll test in most browsers I can and will certainly share the results. @geelen Yeah, all we need is the benchmark page, right? I haven't dealt with any problem too, but if seeking widespread adoption, I think that have a proof to show people will make them more comfortable in trying it.

[geelen]

You should be able to use https://github.com/amcss/am-benchmarks to test browser compatibility. For example:

• http://am-benchmark.glenmaddern.com/classes/http://getbootstrap.com
• http://am-benchmark.glenmaddern.com/attributes/http://getbootstrap.com
• http://am-benchmark.glenmaddern.com/values/http://getbootstrap.com

Load each of those in your browsers and if they all look the same, AM is supported!

[eltonmesquita]

Alright then! I'll do my testings and will post them here.
Let's try this in some oldies stuff, just for the sake of it ;D

[geelen]

That's the spirit! 👍

On 9 September 2014 14:36, Elton Mesquita notifications@github.com wrote:

Alright then! I'll do my testings and will post them here.
Let's try this in some oldies stuff, just for the sake of it ;D

—
Reply to this email directly or view it on GitHub
#8 (comment)
.

[eltonmesquita]

Got some testing done:
https://docs.google.com/spreadsheets/d/1LSavox9wcB-FMMjfsLfiyPpjAp7Y058BXwNyEuHayRk/pubhtml

Looking good, no problem by now.
Latter I'll test some more as my boss is looking at me in a not so good way right now ;D

[geelen]

You bloody champion!

On 9 September 2014 15:12, Elton Mesquita notifications@github.com wrote:

Got some testings done:

https://docs.google.com/spreadsheets/d/1LSavox9wcB-FMMjfsLfiyPpjAp7Y058BXwNyEuHayRk/pubhtml

Looking good, no problem by now.
Latter I'll test some more as my boss is looking at me in a not so good
way right now ;D

—
Reply to this email directly or view it on GitHub
#8 (comment)
.

[eltonmesquita]

@geelen ;D
Updated with some oldies/oddities and finally found the browser that doesn't support it. But no worries, IE 6 mobile was never used anyway. lol

[MaciekBaron]

It is well known that attribute selectors don't work on IE6 and below. Obviously this browser has little support nowadays, but it means that a website using AM will be completely unstyled. This is particularly an issue if you want your website to work in China, which still has 10-13% of IE6 users.

I think this should be mentioned in the spec to make people aware of the potential issue.

[oliver-eifler]

I'm just working on a small javascript lib to use AM (like class functions in jQuery).
I found some issues:

• attributes (and their values) are case-sensitive in IE7 - 11
• if I change AM-attributes for an element via javascript (for example am-Button="big round" -> am-Button="small" ) IE7-11 will not repaint this element. i have to force an repaint (change display to none and back to old value).
  On FireFox, Chrome, Opera and Stock Android Browsers repaint of element is done after attribute change (as excepted)

[ericdfields]

@oliver-eifler was just about to use this on a redesign we're doing to one of our pages, but it needs to hook into an "edit mode" that is totally reliant on Javascript. I see AMCSS + JS being a big headache for IE development, based on your findings. sigh passing…

[oliver-eifler]

@ericfields The case-sesitive issue on some browsers is not a big deal, as mentioned in the specs the Module Name (Attribute) should be camel-case (ie. am-Button) and the values always lower-case (ie. big round green).
I don't know if IE is the only browser I've to force a repaint after changing an AM-Module, so I always force repaint after change. This is could be a performance issue on FF, CHROME etc. because they do a automatic repaint and then my forced repaint. For my little am lib i'm working on an initial check if repaint must be forced or not - something like a feature-detection in 'modernizr'. I'll release it here on git as soon as it works

[oliver-eifler]

Little update:

• attributes are not case-sensitive in IE9+ and every tested non IE browser. in IE8 and lower they are case-sesitiv
• attribute values are case sesitive in every browser
• auto repaint on attribute change works in IE9+ and every tested non IE browser
• styles via classes overwrites styles via attributes (as excepted)

Tested on latest Firefox, Chrome, Opera, Android2.1 Stock Browser, Android4.4 Chrome, VMWare IE7/8/9/10/11, OS-X Safari 6

[ericfields]

I don’t think I’m meant to be CC’d on this.

On Sep 18, 2014, at 5:35 PM, Oliver Jean Eifler notifications@github.com wrote:

Little update:

attributes are not case-sensitive in IE9+ and every tested non IE browser. in IE8 and lower they are case-sesitiv
attribute values are case sesitive in every browser
auto repaint on attribute change works in IE9+ and every tested non IE browser
styles via classes overwrites styles via attributes (as excepted)
Tested on latest Firefox, Chrome, Opera, Android2.1 Stock Browser, Android4.4 Chrome, VMWare IE7/8/9/10/11, OS-X Safari 6

—
Reply to this email directly or view it on GitHub.

[MaciekBaron]

@ericfields mate, you've received a github notification, turn them off if you don't want them..

[tobystokes]

I don't know whether a seperate namespace affects browser compatibility, but http://caniuse.com/#feat=dataset is a useful reference, and highlights an Android 2.3 possible issue.

[curtisblackwell]

@tobystokes only on select elements on Android 2.3? doesn't sound like a big deal to me.

[oliver-eifler]

First release of my am.js
a javascript library for using attributes and their values rather than classes for styling HTML elements.
Based on AMCSS Attribute Modules for CSS - Specification github.com/amcss/attribute-module-specification.
Works on all browsers which supports attribute and ~= selectors
You can find it here on git:
https://github.com/oliver-eifler/am.js.git
Comments are welcome ;)