Home/ Questions/Q 8853225
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T13:35:59+00:00

Not that I need an answer, as the short answer would be NO .

  • 0

Not that I need an answer, as the short answer would be NO. I pose this question more because it is an issue that is not addressed from the jQuery forums to Google code forums to right here at StackOverflow.

I’ve been a programmer since I got my first Commodore 16 that used a standard cassette tape recorder to back up data (yes… I’m that old). Since then, there has been the long and tiresome battle to create universally compliant standards in coding practices in many programming languages, with the W3C being the closest we have come to date.

In my own opinion, and after writing a couple of apps with jQuery Mobile (jQm), I see jQm as a good idea that was badly implemented just for this very reason. jQm has decided to implement their own CSS in a non-compliant manner, leaving the developer fighting the hi-jacking of their own ‘standards compliant’ supplemental CSS by jQm. Remember folks, the C in CSS is for ‘cascading’, meaning that a style declaration that follows a previous style
declaration will take precedence over that style which came before it. Not the case with jQm CSS, making it NON standards-compliant.

I have experimented with many ways of implementing my own standards-compliant CSS around the CSS hi-jacking behavior of jQm (external CSS files loaded after jQuery’s CSS, @imports, in-line styles… you name it) to no avail. Outside of actually over-riding the styles contained in the jQm CSS with CSS of my own after jQm CSS has been loaded.
I mean… doesn’t this completely negate any benefit of using jQm in the first place?

Points to my argument. If I have to either ‘over-ride’ jQm’s CSS in my own ‘standards-compliant’ CSS, or tweak the jQm CSS itself (which will then remove the advantage of being to able to import your existing jQm CSS into Theme Roller at a later date to add another style), then I may as well write my own UI to begin with.

I can write my own transitions easily enough using jQuery and CSS3 transitions, so there go any benefits from using jQm’s transitions. jQm’s translation of mouse events to touch controls are already becoming obsolete, as most major browsers are already perfecting this themselves with the advent of tablets and touch-screen laptops into the desktop world environments, but unlike jQm, in a standards-compliant manner. Then there is jQm’s default ajax navigation behavior, that I can easily implement myself using jQuery’s own rich XMLHttpRequest shorthand methods ($.ajax, $.get, $.post, and $.getJSON) with lower overhead and better performance.
So why use jQm at all?!

I myself am done with jQm, as the time I have spent fighting jQm’s non-compliant CSS behavior, exceeds the time it takes me to just write my own standards-compliant UI in the first place. I am a firm believer in standards compliancy, having had to battle non-compliant apps (like IE… oh-no, did I say that in my out-loud voice!) for more than two decades.

Myself… I will be writing all my apps using standards-compliant HTML5 and CSS3 from now on, which has the additional benefit of being able to easily deploy through different mobile devices by wrapping my compliant coding in the mobile devices own SDK’s that are designed to do just that, with yet another powerful benefit of being able to use the mobile device’s own features (such as accelerometer, compass, camera, etc…).

I would love to hear feedback on this issue, as I always keep an open-mind, and love a good round table discussion that has me rethinking decisions I have made myself based on my own experience.

UPDATE
Here is an example and a jsfiddle that describes what I am referencing in this question.

<style>
.my_link a:link{ color:#00cc00 }
</style>

<div data-role="page" data-theme="a">
<p><a href="#">
Link using default jQm CSS</a></p>
<p><a href="#" class="my_link">
Link using CSS class declared in HEAD after jQm CSS</a></p>
<p><a href="#"> style="color:#00cc00">
Link using inline CSS declared after jQm CSS</a></p>
</div>

http://jsfiddle.net/Ephiphany/S7NuK/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To override JQM styles (or any styles for that matter) your css selector needs to be more specific than the one used by JQM’s stylesheet.

    For example, given the following page with 1 link:

    <div data-role="page" data-theme="a" data-url="/Ephiphany/S7NuK/show/" tabindex="0" class="ui-page ui-body-a ui-page-active" style="min-height: 209px;">
  <p class="my_p"><a href="#" class="my_link ui-link">Link using default jQm CSS</a></p>
</div>

    JQM has this style:

    .ui-body-a .ui-link:link {
    color: #2489CE;
}

    CSS Specificity is a priority system, in that there are tiers of precedence: Inline Styles > ID > Class/attribute/state > Tagname/psudoelement

    With this in mind, we either need an ID, or we need to use two classes. For example, this would override it if it comes after the JQM stylesheet:

    .my_p .my_link:link { 
    color: #00cc00
}

    http://jsfiddle.net/S7NuK/2/

    Don’t forget about :visited :hover :active etc.

    • 0