search

amcss / attribute-module-specification

The Attribute-Module CSS (AMCSS) Specification
MIT License
393 stars 8 forks source link

Browser compatibilty #8

Closed eltonmesquita closed 7 years ago

eltonmesquita commented 10 years ago

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 commented 10 years ago

@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 commented 10 years ago

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 commented 10 years ago

@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 commented 10 years ago

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

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

eltonmesquita commented 10 years ago

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 commented 10 years ago

That's the spirit! :+1:

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 https://github.com/amcss/attribute-module-specification/issues/8#issuecomment-54962198 .

eltonmesquita commented 10 years ago

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 commented 10 years ago

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 https://github.com/amcss/attribute-module-specification/issues/8#issuecomment-54966268 .

eltonmesquita commented 10 years ago

@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 commented 10 years ago

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 commented 10 years ago

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

ericdfields commented 10 years ago

@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 commented 10 years ago

@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 commented 10 years ago

Little update:

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

ericfields commented 10 years ago

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 commented 10 years ago

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

tobystokes commented 10 years ago

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 commented 10 years ago

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

oliver-eifler commented 10 years ago

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 ;)