iOS7 on safari wont work

[universaldenmark]

Just tested a website that didnt get any CSS because of the LESS.js. I used Safari on ios7 on a iPhone 4S

[Soviut]

If you plug your iPhone into a mac you can use Safari developer tools to check for Javascript errors in the console. If you can post any errors it will give the developers a better idea of where to look.

Additionally, have you tried compiling your styles using lessc or or another LESS compiler to see if it gives you any errors?

Finally, you really shouldn't be using LESS.js on your site unless you specifically need dynamically generated styles. Instead, you should be compiling your LESS files to CSS before you upload them to the server. It's far more efficient that way.

[universaldenmark]

Its for development-only I use LESS. I tested on Ipad 1 yesterday and it worked fine without the LESS. I'll do a test with iPhone 4S later today. Thanks!

[universaldenmark]

Just tested it with a compiled .css file and it then it works. Also tested on a iPad (3) with iOS7. Same issue.
LESS.js works fine in Safari on IOS5 (testing in a iPhone 3GS) though.

How do I use Safari Dev Tools to test on my iPad? I've never tried that before

[universaldenmark]

I've tested in a lot of other mobile browsers and LessJS works in less than 50% of them. Is that normal?

[lukeapage]

http://lesscss.org/#usage

Client-side is the easiest way to get started and good for developing your LESS. For production and especially if performance is important, we recommend pre-compiling using node or one of the many third party tools.

I'm a little surprised, but we do not test in a variety of browsers and using lessJS for a site suitable for mobile seems like a bad idea.

[universaldenmark]

Yeah but this is not for production. Only for development. Everything will be compiled before any code go into production. Is there an alternative to Less.js then? I find LESS extremely valuable when developing, but it seems Less.js aint the way to go for mobile development.

[lukeapage]

I'll happily fix anything if you can get me the error being thrown, but we would rather persuade people to compile serverside. You are also free to submit your own pull requests.

I searched google for "get iphone safari errors" and the first link seemed to give some useful information.

[lukeapage]

what build tools do you use? Do you just need a less watcher you can run that will compile your less as you change it? Thats what most people would use..

and the watchers use "less.js" but they use it within node.

[universaldenmark]

Hmm I'm not sure what you mean as I'm more a graphical designer than a developer, but I use CODA 2 for Mac, and change code directly in php files (html5 and css3), that I can watch different devices. Less is then used, so I can keep colors and no prefixes while changing and adding code.

[universaldenmark]

FYI I just tested using the debug tool, but didnt find any error beside a html one, which didnt affect anything (deactivated it to test). If you want to see yourself, this is the domain: http://www.cphrecmedia.dk/musikdk/mobile/index.php

[seven-phases-max]

Sorry, wrong number.

[Soviut]

I would recommend looking into Grunt for setting up an automated build process. You can have it compile your LESS. Then use Autoprefixer to automatically insert vendor prefixes based on current caniuse.com data for browser support. Then you can set up distribution tasks that will minify your CSS and can even output source maps so the minified CSS can be debugged in the browser.

[universaldenmark]

@Soviut Grunts seems like a very smart solution, but would it make sense to make a Grunt process every time I need to test a new color? Many changes in development, might be small and simple changes where I uses mixins

[Soviut]

I don't think you quite understand what Grunt is for. The whole point of Grunt is to automate complicated build chains while you're developing. For example, the grunt workflow I use compiles LESS to CSS, Jade to HTML, CoffeeScript to Javascript. Then it concatenates the CSS files together, applies autoprefixer, minifies it and generates a source map. It does the same with my javascript.

It also runs a test server (grunt-contrib-connect) and a watch process (grunt-contrib-watch) which automatically tell the browser to update the CSS and javascript when I save my files.

[universaldenmark]

I though such a process could take some time? When I edit now, it takes 500ms to update everything, and if I'm "nudging" a box in place (normally use inspector for that though) such compiling would take some time wouldnt it?

[Soviut]

Generally compilation should be under 100ms using lessc. Imports can dramatically increase that time, but only to around 200-300ms. less.js is by far the slowest, I've seen 1000ms compile times with imports.

Also, in Grunt you can have separate "dev" and "dist" workflows. For example, In dev you can avoid minifying the CSS after compiling your LESS. Couple with with the fact that Grunt can automatically update the CSS in-browser using LiveReload and it drastically reduces the feedback time when you make a change.

Finally, in my experience, if you're reduced to "nudging" elements around, it probably means the design your working from is bad. Establish scale, colour and column guides with your designer before they start making your life miserable. Decide on the primary, secondary and tertiary colours as well as their variations. Then decide on the small, medium, large and extra large gap sizes between elements. Nothing is worse than a designer who uses a slightly different shade of blue and a slightly different height between headers on every page.

[universaldenmark]

I am the designer :) Thats why I need nudging. And everything is very modular and reuseable, so thats not a problem. I'll look more into Grunt!