4

I am wondering if its a good idea (if I want consistency across a multiplatform build) to include a css reset, or perhaps a css normalize library?

My concerns are of course, application speed, load time and memory usage, and the goal is of course UI consistency across platforms...

ethanpil
  • 2,522
  • 2
  • 24
  • 34
  • sorry I am not happy with the inconclusive answers below... still waiting as of today! – ethanpil Aug 20 '14 at 01:37
  • All the answers below are valid. I was tempted to vote to close this as "primarily opinion-based" but it seems you are rejecting answers because they don't provide clear research or performance numbers. I'm left wondering what performance analyses you have done on including vs not including a CSS reset. – CodingWithSpike Sep 03 '14 at 16:07
  • With the updates and clarifications by @Martin Barker this morning, I am satisfied with his answer and have accepted it. – ethanpil Sep 03 '14 at 16:45

5 Answers5

2

Overview

CSS reset is a must, Cordova / Phonegap all use the phones native browser so Windows Phone this is an Internet Explorer wrapper, android it's now a Chrome wrapper (old version use their own browsers wrapper), iOS uses what ever version of safari mobile for that version of iOS all of witch have more support for HTML5 so there could be differences. this means you need to reset so you have a base that is the same for all devices / browser the same as a Desktop website. but performance entirely relies on what your doing if you just use a small basic reset it will be less but then even a big one it's would you notice it anymore then not having it.

CSS Reset

So we know browsers have slight differences in CSS Engines Default Font's and stuff so we use a reset to prevent that this is the same for Mobile browsers (thats what cordova/phonegap use) so a reset is always recommended however, even if your building a cordova/phonegap mobile application for both iOS and Android is a royal pain in the arse Android support loads of Device Sizes iOS only has a few. but these sizes can cause massive problems not to mention the DDPI you have to use as the DPI varies so much.

Performance

There is a slight performance drop, not that you would see under any messurement it unless you include a massive CSS Reset system like http://getbootstrap.com/css/ that would add a bit of a performance hit but would you notice it if its 0.5 seconds your javascript takes longer from phonegap to init(), however look at bootstrap first if there is stuff in there that you would be using it would be worth it just to save development times i'm constantly using the alerts from http://getbootstrap.com/components/. there are small ones like http://html5doctor.com/html-5-reset-stylesheet/ if thats all your wanting.

Sources The Internet it's full of tutorials telling you to implement a reset! https://www.google.co.uk/search?q=Phonegap+use+CSS+Reset&oq=Phonegap+use+CSS+Reset&aqs=chrome..69i57j69i60l3.3494j0j7&sourceid=chrome&es_sm=0&ie=UTF-8

You want facts ok stop using Phonegap/Cordova most of what it does is implements or utilizes HTML5! HTML5 is a work in progress so should not be used! http://www.w3.org/TR/html5/

ME: 5 Years of Mobile Development including developing parts of the Windows Phone 7 Phonegap. while being a developer for one of the Platform Preview applications. so i was building parts of phonegap for WP7 before most users new that WP7 was coming out.

Barkermn01
  • 6,781
  • 33
  • 83
  • It is exactly the same thats my point!!!! I know for a Fact that iOS embedded browser is not the same as Androids Embedded Browser for starters Androids supports flash!!! – Barkermn01 Sep 03 '14 at 15:45
  • It is impossible to get accurate stats every device is different thats the point androids have single core 400 Mhz processors up to 1.0 Ghz 64bit Quad cores, iPhones there is 1,2,3,3g,3gs,4,4s,5,5s,5c all with differing performances depending on stuff from Operating system version to background apps running. so i could give you stats from my Samsung Galaxy S5 that would not match anything as i have Avast installed constantly scanning – Barkermn01 Sep 03 '14 at 15:52
0

Absolutely. If you're developing the app for multiple platforms then it sounds like a great idea. Though I have no doubt you'll still encounter differences across platforms.

I can't see how it would affect application speed/load times/memory usage.

Rocklan
  • 7,888
  • 3
  • 34
  • 49
0

While developing the app for cross platforms there are lots of issue regarding the css . It will be better to reset the css . But there are still issues regarding the performance .

This article might be helpful to you http://www.informit.com/articles/article.aspx?p=1915792&seqNum=6

iamsuman
  • 1,413
  • 19
  • 32
0

Yes, you should!!

I've developed cross platform apps.

and each time I've used CSS reset.

MarmiK
  • 5,639
  • 6
  • 40
  • 49
Yuvraj
  • 205
  • 1
  • 10
  • This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment). – Eugene Podskal Sep 01 '14 at 09:58
  • In fact, @EugenePodskal, he's answering it. – Sergi Juanola Sep 01 '14 at 14:01
  • @Korcholis If I add answer `No, you shouldn't! I've not ..` with no explanation at all, then how will you react to it? This post **may** give an answer, but it is not a solid well-thought answer, because it is based on personal experience and not on the objective criterias. Well, it can be expanded, but for now it has not been. So, that's why I've marked it in such a way in the VLQ query. – Eugene Podskal Sep 01 '14 at 14:13
  • Well, I agree with you @EugenePodskal, but in that case none of the answers would count as an answer in this question. It is true that numbers give us a way to understand what to follow, but numbers may still shadow the benefits of using it (or not using it). Anyway, let's hope for a meaningful answer – Sergi Juanola Sep 01 '14 at 14:39
-1

I'm not sure about the exact context of a Phonegap app as I've never actually worked on one, but generally from a performance point of view any CSS reset shouldn't have an impact at all.

However, my opinion is that more often than not you shouldn't even bother with a full-fledged CSS reset targeting a bunch of specific elements and properties - you often end up overwriting them further down the stylesheet anyway.

A simple universal selector margin/padding reset is all I use today, which I supplement with my favourite box model tweak.

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

Maybe 10 years ago someone would tell you that the universal selector is slow, and it could've been true then, but using it on its own has been proven to be absolutely harmless today.

The rendering/layout engines of pretty much every recent browser are so quick anyway, not to mention the fact that even low end mobile devices nowadays are equipped with multi-core CPUs.

I wouldn't even call it micro optimisation, that's how negligent the impact is.

Now if you were to use div.header * - that's much more expensive, but probably still not something to lose sleep over if you don't have a few thousand elements on the page.

Have a read and test it for yourself.

senectus
  • 409
  • 4
  • 14
  • This question specifically asks about PhoneGap/Cordova apps. It is not a question about the general merits or strategies for doing a reset. – ethanpil Aug 31 '14 at 12:55
  • As far as I know, PhoneGap/Cordova apps are rendered by the device's default web browser. It's the same layout engine. A few lines of CSS will have no performance impact in either environment, so the comparison isn't irrelevant at all. – senectus Aug 31 '14 at 14:01
  • If you refer to the link at the end of my answer, you'll see that a budget tablet running an older version of Android renders a page containing around 7000 elements while targeting a whole bunch of complex selectors in just over a second. In a real project, a basic CSS reset that's nowhere as intensive as this artificial test shouldn't add any more than 100ms to the rendering time on even the slowest of devices. – senectus Sep 01 '14 at 11:34
  • Negative rep because you post "I'm not sure about the exact context of a Phonegap app as I've never actually worked on one" And the entire context of this question is PhoneGap – ethanpil Sep 03 '14 at 17:28