Modernizr progressives or exceptions?

Posted on by

Modernizr, what an interesting tool you are. How do I use your class names in my CSS files? You’ve given me a choice and I’m not sure what to use:

.multiplebgs div p {
  /* properties for browsers that
     support multiple backgrounds */
}
.no-multiplebgs div p {
  /* optional fallback properties
     for browsers that don't */
}

There are two ways to view this, bottom up, and top down. They both have their advantages and disadvantages, and I’m going to attempt to highlight these for you, so you can make your own decision.

Bottom up

For the “bottom up” way of doing things, we define a lowest common denominator. A set of styles that will work with all the browsers your website is designed to target. The intersection of all the features of all your browsers, if you want to put it that way. From here, we use Modernizr to progressively enhance the user’s browsing experience for browsers that support particular features. An example may help:

a.btn {
  background:transparent url(../img/btn-red.gif) no-repeat scroll 0 0;
  padding:5px;
  display:inline-block;
  width:40px;
}
.borderradius a.btn {
  background-color:red;
  background-image:none;
  border-radius:5px;
}

The advantages being:

  • A clearly defined baseline that works on all browsers we’re coding for
  • If we aren’t able to determine client features (because for example, Modernizr is not available: the CDN is down, or the client doesn’t have JavaScript enabled) we know that the baseline styles will be used and will ensure the site looks acceptable regardless

The disadvantages are:

  • We end up writing more and more CSS as we utilise new features that become available
  • It doesn’t encourage a particularly forward thinking coding practice. You’re essentially coding for the browser with the lowest feature set
  • If you want to change the baseline styles because of a redesign or perhaps your baseline is raised, you’re probably going to have to change overridden styles in the progressive enhancement style blocks as well

Top down

The “top down” approach is where we define styles for new browsers, and then use the “no-” prefix classes to define exceptions for browsers that don’t support the feature we’re exploiting. e.g.

a.btn {
  border-radius:5px;
  background-color:red;
  padding:5px;
  display:inline-block;
  width:40px;
}
.no-borderradius a.btn {
  background:transparent url(../img/btn-red.gif) no-repeat scroll 0 0;
}

We’re forward thinking, assuming everyone viewing our site is using these great new features and coding in fallbacks for the exceptions to the rule. Our view is that one day, all browsers will support the styles we’re using…and we’re adding in exceptions for in the mean time. The advantages are:

  • We end up writing less CSS, as we don’t have to override properties we’ve previously declared that the browser doesn’t understand
  • Our mindset is altered slightly, encouraging us to make use of and exploit new browser features that allow us to code and prototype faster
  • As our browser baseline increases, it’s really easy to remove exceptions that are no longer used

The disadvantages are:

  • We’re totally relying on Modernizr and the browser having JavaScript enabled. Without JavaScript the “no-” prefixed classes are not added to the <html> element and the browser is left trying to style things that aren’t supported or use style declarations that don’t exist (as far as the browser knows).

Well, sort of. You could always use the “no-js” class on the <html> element which Modernizr normally removes and replaces with “js” (to indicate JavaScript is available). You’d define your styles as above, but then define a lowest common denominator style set, for when you don’t know what features a browser does or doesn’t support. That’s kind of overkill though.

So, that’s basically it. When I first thought about it my gut reaction was to sit in the bottom up camp, but after thinking about it, and considering the audience for the project I’m working on it makes more sense to use the top down approach. Especially now that I’ve written it down like this. I’m hoping it’ll help others to make the right decision.

30 thoughts on “Modernizr progressives or exceptions?”

  1. Pingback: Tweets that mention Modernizr progressives or exceptions? | freestyle developments -- Topsy.com

  2. Hi Alan,

    Original creator of Modernizr here, wanted to thank you for writing this up, it’s a useful resource! I’m glad you went the Top Down approach, that is generally how we recommend using Modernizr but thus far we haven’t had a simple, clear resource explaining the differences to point to. Now we have.

    Our reasons for preferring Top Down are the advantages you listed, but also: it creates a very clean and clear separation between what is our desired markup and CSS, and what is there only to serve as a fallback. Separating fallbacks from goals is a really good practice to get into, and a great mindset to have.

    Lastly, we also consider the disadvantage minimal; yes, there are people with no JavaScript or for whom it is proxy-filtered out, but the reality is that the Web going forward will need JavaScript if it is ever to progress and flourish. As long as we make sure that core content is at least accessible without JavaScript, then everything should be okay to need JavaScript (in our opinion). That includes a nicer looking design and better interactivity and navigation. It’s for the sake of the Web in the long-term without sacrificing too much on the short term.

    Thanks again!

  3. I’ve mostly used Modernizr as a way to catch exceptions, so more of the top-down approach. It results in the most clean CSS and is easier to debug if something goes wrong.

  4. Definitely a top-down kind of guy. I code for functional/capable browsers and use fallbacks/exceptions for the less-capable browsers.

  5. I see you share interesting stuff here, you can earn some
    additional cash, your blog has huge potential, for the monetizing method,
    just search in google – K2 advices how to monetize a website

  6. buy priligy online These women include those who are significantly overweight with a body mass index of more than 35 and those who are diabetic Diabetes Mellitus DM Diabetes mellitus is a disorder in which the body does not produce enough or respond normally to insulin causing blood sugar glucose levels to be abnormally high

  8. J Pediatr 2003; 142 656 661 where can i buy generic cytotec no prescription I mean pain is even a strong word because it s not painful it s just like oh I feel my kidney

  9. DOLOBID diflunisal like other NSAIDs can cause serious skin side effects such as exfoliative dermatitis SJS and TEN which may result in hospitalizations and even death cost cheap cytotec without prescription If you are taking iron supplement then have a talk with doctor

  11. Rakoo Casino bietet eine Vielzahl von Zahlungsmethoden, darunter PayPal und paysafecard, um den Spielern eine
    sichere Einzahlung zu ermöglichen. Diese hohen Quoten bieten den Spielern bessere Gewinnchancen und machen das Spielen noch attraktiver.
    Es gibt spezielle Bonusaktionen, die regelmäßig angeboten werden und
    den Spielern zusätzliche Gewinnchancen bieten.
    Regeln für Neukundenboni und wöchentliche Werbeaktionen ermöglichen es Spielern, von verschiedenen Angeboten zu profitieren.
    Online Casinos bieten zudem Reality Check-Benachrichtigungen an, die Spielern helfen, sich der Spielzeit bewusst zu bleiben. Seriöse deutsche Online Casinos
    setzen auf diese Technologien, um ein Höchstmaß
    an Sicherheit zu bieten. Beispielhafte Anbieter wie North Casino bieten ein umfangreiches Spielangebot und zeichnen sich
    durch hohe Sicherheitsstandards aus, die die Sicherheit
    der Spieler garantieren.
    Es gibt dabei 4 große Lizenzgeber, die Unterlizenzen an Glücksspiel-Betreiber ausgeben. Seit Anfang der 1990er Jahre gibt man hier Glücksspiellizenzen an Betreiber aus aller Welt
    aus. Die folgenden Lizenzgeber hingegen lizenzieren ausländische Casinos, die
    seit vielen Jahren von Spielern in ganz Europa und sogar weltweit aufgesucht werden können. Dadurch entstehen auch jede Menge neuer Glücksspielanbieter, doch stehen sie ausschließlich den Bewohnern des jeweiligen Landes zur Verfügung.
    Ein Bonus Crab Casino bietet seinen Spielern die Möglichkeit, in der
    Regel für geringe Einzahlungen, einen gratis Pick
    bei der Bonuskrabbe zu nutzen.

    References:
    https://online-spielhallen.de/meine-umfassenden-erfahrungen-mit-evolve-casino/

  12. Nach eigenen Angaben umfasst die Spielauswahl im Wazbee Casino mehr als 4’000 Titel.
    Wazbee bittet Familienangehörige und Freunde, auf die Support-Mitarbeiter
    zuzugehen, wenn das Spielverhalten einer nahestehenden Person Sorgen bereitet.
    Spieler können zwischen einen 100% Bonus bis zu 200€ oder einen 150%
    Kryptobonus bis zu 100€ wählen! Das WazBee Casino ist mit einer zuverlässigen Lizenz aus Curacao lizenziert.
    50 Freispiele ohne Einzahlung + 100% Bonus bis zu 300€ + 100 Freispiele Das Casino bietet Vielfalt, Abwechslung
    und Unterhaltung.
    Sehe gutes casino macht viel spass Auszahlung ist sehr schnell aber wenn mal etwas sein sollte ist
    der Support ziemlich schnell und arbeitet effizient !

    Das Wazbee Online Casino bietet dir den sogenannten VIP Club an, der aus zwei
    Stufen besteht. Damit wird das Laden der Inhalte garantiert
    und du kannst dich darauf einlassen, dass deine Spielstände erhalten bleiben. Das umfassende Slotangebot wird im Wazbee Casino auch durch mehr als 500 Tisch- und Kartenspiele ergänzt.
    Egal, ob Fische, Süßigkeiten, Weltall oder Wilder Westen,
    Wazbee Casino bietet viele Optionen. Dank der Kategorien kannst
    du bequem filtern und mit der Suche hast du die Option deine Wunschspiele
    gezielt zu finden.
    Ergänzend zum attraktiven Willkommensbonus erfährst du
    hier, worauf du bei dem neuen Online Casino freuen kannst.
    Bin neu auf Wazbee und habe es getestet bis jetzt bin ich
    zufrieden und schöne Angebote und viel spielauswahl super Es ist ein faires casino es könnte mehr no despoit Angebote geben bis jetzt noch keine Probleme gehabt hoffen wir das das es so bleibt Durch die
    Lizenzierung und Regulierung wird sichergestellt, dass Spielerinnen und Spieler aus Österreich ihre
    Lieblingsspiele beruhigt genießen können, im Wissen, dass ihre Daten und Einlagen sicher sind.

    Mit einer lebhaften Benutzeroberfläche, die den Charme der österreichischen Kultur
    widerspiegelt, bietet Wazbee ein Spielerlebnis, das sowohl vertraut als auch
    spannend ist. Das Casino bietet eine große Anzahl an Casino Spielen an, und
    auch das Design weiß zu gefallen.

    References:
    https://online-spielhallen.de/sofortige-casino-freispiele-der-schnellste-weg-zum-gluck/

  13. Das Bassbet Casino bietet eine große Auswahl an Spielen, die jeden zufrieden stellen. Spielen Sie klassische Tischspiele wie Blackjack,
    Roulette und Poker. Zusätzlich bieten wir umfassende Informationen und Prognosen in unserem Blog, wo du jede Woche die neuesten Sportwetten News
    und Vorhersagen findest.
    Das Spielangebot bei 1Bet Deutschland ist beeindruckend und bietet eine breite Palette
    an Casinospielen, die sowohl neue als auch erfahrene
    Spieler begeistern. Das 1bet Casino ist ein Glücksspielanbieter, der auch Sportwetten anbietet.
    Die Spieler genießen eine reibungslose Erfahrung auf , egal ob sie auf dem Desktop oder mobil
    spielen. Die mobile Website sorgt für ein großartiges 1Bet-Casino-Erlebnis und macht es einfach,
    jederzeit und überall zu spielen. Des Weiteren finden Sie
    in unserem Casino unser Spielautomatenturnier – Kampf der Drehungen und wiederkehrende
    Promotionen, die zusätzliche Gewinne und Freispiele ermöglichen können.
    Damit Sie den Willkommensbonus erhalten, müssen Sie einfach während des Einzahlungsvorgangs den Button für den entsprechenden Bonus durch
    einen Klick aktivieren.

    References:
    https://online-spielhallen.de/monro-casino-deutschland-ihre-anlaufstelle-fur-online-glucksspiel/

  14. Variante des Krypto Willkommensbonus eine attraktive Möglichkeit für alle,
    die ihre Kryptowährungen in ein spannendes Spielerlebnis umwandeln möchten. Wenn du dich hier erkennst kannst du
    von einem 300% Bonus bis zu 600€ für Ersteinzahlungen von 100€
    oder mehr in Kryptowährung profitieren. Dazu bietet der
    Anbieter eine zweite Möglichkeit, deine erste Einzahlung noch mehr auszureizen.
    100% bis zu 500€ + 150 Freispiele Dennoch haben wir uns in der Spielothek sicher gefühlt
    und empfehlen Haz Casino gerne weiter! Freispiele und Bonus sind umsatzfrei.
    Freispiele sind für Ramses Treasures. Mindesteinzahlung
    Sobald Sie die Webseite besuchen, werden Sie von einer ansprechenden Benutzeroberfläche begrüßt, die sehr einfach zu durchstöbern ist.
    Wenn Sie mit einem aktiven Willkommenspaket spielen, dürfen Sie keine
    höheren Einsätze als 4 € pro Runde tätigen, wobei Sie 30 Tage Zeit haben, um dieses durchzuspielen. Neben dem Willkommensbonus bietet Haz Casino auch einen Cashback Bonus, der auf der Summe der
    von Ihnen getätigten Einsätze basiert. Als ob das nicht schon genug wäre, können Sie sonntags auch noch einen 50%
    Einzahlungsbonus bis zu 250 € erhalten, wenn Sie nur 25 € einzahlen.
    Mit einer Mindesteinzahlung ab 20 Euro qualifizieren Sie sich
    für einen der drei Willkommensboni, die insgesamt bis zu 250% betragen, was ein erstaunlicher Prozentsatz ist.
    Jedes dieser Angebote ist mit einem zusätzlichen Anreiz in Form von 125 Freispielen für einen beliebten Spielautomaten verbunden.

    References:
    https://online-spielhallen.de/bregenz-casino-cashback-ihre-geld-zuruck-aktion-im-detail/

  15. These combined security actions provide a safe,
    transparent, and trustworthy environment for all players.
    While live chat is generally the fastest way to get help, email support is also monitored
    around the clock, although response times may vary. All features,
    including registration, banking, bonuses, and the complete game library, are accessible directly through your mobile
    browser.
    In case player doesn’t have an opportunity to provide documents in above-mentioned alphabets casino reserves the right to demand video verification where player shows his/her documents.
    Creating multiple Player Accounts by a single player can lead, at the
    sole discretion of the Casino, to termination of all such accounts and
    cancellation of all payouts to the player. The
    Casino is not liable for any hardware or software defects,
    unstable or lost Internet connection, or any other technical
    errors that may limit access to the Website or prevent any players from uninterrupted play.
    Please bear in mind that some games may be unavailable in certain jurisdictions, as
    required by the policies of game providers which may change from time to time.
    The Casino cannot guarantee successful processing of withdrawals or refunds in the
    event that the player breaches this Restricted Countries policy.

    References:
    https://blackcoin.co/keno-rules-explanation/

  16. Plex is special since you can use it to control your own library of content, not just watch what’s available to you.

    Whenever there’s a live match, local broadcast, or international game, you don’t
    need a cable subscription to watch. With help from NBCUniversal,
    the streaming service includes your favorite sitcoms, this season’s shows, films, and sports events.
    Late-night fans can watch cult and unusual thriller films that you won’t find
    on mainstream streaming platforms. You browse, click on what you want, and
    watch the content you chose. With Tubi, streaming movies and
    TV shows is free, and you don’t have to pay anything.

    There’s plenty of casino action available at the Star, as
    well as great dining, luxury accommodations, and engaging entertainment.
    “The latest news once again increases uncertainty for members. We’re seeking further information from the company about this announcement,” he
    said. “For Star, the Queen’s Wharf sale is a strategic retreat from what has become a financial quagmire, with development costs blowing out by more than $1 billion,” he said.
    The deal will see Star give up its 50 per cent stake in the Queen’s Wharf casino complex.

    Star, which operates casinos in Brisbane, the Gold
    Coast and Sydney, entered a trading halt before the Australian share market opened on Friday after failing to post
    its half-year financial results. Star’s board remains
    unable to sign off on and lodge its half-year financial results
    due to the ongoing uncertainty and its shares remain suspended from trading on the ASX.
    The failure to secure the $750 million deal has forced the company to try and shore up
    an alternative arrangement with US casino group Bally’s.
    Star warns its future remains uncertain and
    its shares will not be able to return to trade until it
    is able to secure cash and lodge its financial accounts. Star investors who got excited on Monday by the left-field
    emergence of a mystery Macau buyer of the casino’s shares would be wise to curb their enthusiasm.

    References:
    https://blackcoin.co/ecarte-poker/

  17. Crown Melbourne upholds the highest standards of responsible gambling.
    Each space is tailored to guests seeking refined comfort and discretion. These ultra-private salons provide exceptional service, higher
    betting limits, exclusive promotions, and gourmet hospitality.
    From classic three-reel pokies to immersive video slots with cinematic features,
    there’s something for every player. Discover the largest and
    most prestigious casino in the Southern Hemisphere.
    Stay in world-renowned hotels like Crown Towers, Crown Metropol, and Crown Promenade — all offering premium rooms, city views, and spa access.

    Discover the exclusive benefits of visiting Crown Melbourne
    Casino & Resort — from luxury accommodation to unmatched entertainment.
    The Melbourne Casino can have up to 2,628 gaming machines, 440 gaming tables and 100 poker tables (within approved boundaries) at any
    given time. What are the best live casinos in the area?

    Those patrons wishing to use a companion card with the
    booking must be able to present the valid card at the box
    office upon ticket collection. Tickets for performances
    purchased through an authorised outlet will be
    fully refunded, including fees. Crown Melbourne features a multi-level
    and basement level car parks, with over 5,000 parking spaces as well as valet parking services, for your
    convenience. Patrons must be 18+ to consume alcohol and not be prohibited from the casino or any Crown property for any reason. Our website and Ticketmaster are the
    quickest and easiest way to secure tickets and will provide access to available tickets for all performances.
    The Palms will open 45 minutes before the show performance time printed on your ticket.

    References:
    https://blackcoin.co/yabby-casino-discover-top-online-gaming-in-australia/

  18. This option provides continuous gameplay 24/7 with consistent betting windows.
    Our Lightning Roulette adds multiplier excitement to traditional gameplay.
    We offer multiple live roulette variants to suit every player preference.
    These involve betting on multipliers that can crash at
    any moment, creating exciting high-risk, high-reward gameplay.
    Our specialty games section includes unique titles beyond traditional
    pokies and table games.
    Navigate to the “Cashier” section from your account
    dashboard. Contact our support team if you continue experiencing login issues.
    This feature saves your login details for faster access next time.
    You’ll receive email confirmation once your account
    is fully verified. You’ll receive a confirmation email
    with your account details and next steps. Review our responsible gambling policies before completing registration.
    The range of safe payment options is diverse and caters to Aussie
    players. The casino undergoes regular auditing to guarantee fair outcomes in all
    its games. As a fully licensed and regulated online casino operator, National Casino adheres to
    international standards that ensure the highest levels of security
    and player safety. Deposit methods are processed instantly, ensuring that you can start enjoying real money games immediately.

    References:
    https://blackcoin.co/national-casino/

  19. Annual nationwide monitoring of forest condition in Germany Additionally,
    the platform aims to allow non-specialist users, such as private forest owners,
    to gain insights in an accessible manner. The ForestWatch service developed by LUP
    offers continuous, nationwide monitoring of the vitality impairment of forests in Germany.

    “I hadn’t even been in a casino at all,” Mr Brown said.
    Of the 1,400 staff members employed at the time, 40 have worked there for the entire three decades.
    Queensland’s first casino, Jupiters, is marking 30 years
    since it first opened its doors to the public.
    Jupiters Casino opened its doors for the first time on November 23, 1985.
    Dive into relaxation in our infinity pool, complete with swim-up bar, sun-soaked deck and private cabanas.

    Google Scholar’s relevance ranking is based on the number of times a document has
    been cited in other documents indexed by Google
    Scholar. The LUP has developed a method that allows a quick and nationwide
    overview of changes in forest condition, including forest damage, to be obtained from the data available free of charge from the
    European Sentinel 2 satellite. The need for large-scale, yet detailed information on forest condition and the short-term development of forest condition grew to unprecedented levels.
    This led to large-scale weakening and partial death of forest stands,
    particularly of the spruce tree species, followed by an enormous increase in insect
    populations. The extreme heat and drought year of 2018 brought a completely new and unexpected dimension of stress for the ecology and management of
    forests.

    References:
    https://blackcoin.co/las-vegas-roulette-rules/

  20. This online haven was born from the passion to bring
    players an exciting experience, with over 5,000 games at their
    fingertips. For real-money play, make a deposit of A$10
    or more and enjoy pokies, table games, and casino tournaments.
    By registering, our players get games from the best providers on the market,
    as well as an extensive bonus system, thanks to which
    you can get the maximum benefit from any bet. Crafted for experienced players, King Billy Casino combines a clear welcome package,
    multi-provider games, and rapid withdrawals within a secure, compliance-forward environment.

    A$2,500 + 250 Free Spins (spread across first 4 deposits) Plus,
    their top-notch support team is always here to help.

    We also offer traditional bank transfers for a more secure and reliable experience.
    You can deposit using Visa, Mastercard, Skrill, Neteller, MuchBetter, Interac, Neosurf, ecoPayz, Paysafe, Coinspaid, and bank transfer.

    References:
    https://blackcoin.co/best-payout-casinos-finding-the-highest-payout-online-casino/

  21. Time2play’s rating methodology relies on unbiased, objective
    metrics to help our team of experts properly evaluate everything about a casino, from
    bonuses and customer support to games and usability.
    We encourage you, our dear readers, to explore and enjoy the exciting world of
    new online casinos in Australia! All modern online casinos are fully compatible
    with all the most popular mobile devices. Ideally,
    you want to stick to new online casinos that are willing to
    provide you with as much information and transparency as
    humanly possible.
    We track value across latest casino bonuses, compare structures in welcome bonus
    guides, and follow rotating free spins to see which brands treat players fairly
    over time. New Aussie online casinos launch with different strengths.
    Providers roll in quickly, so you can try new casino games alongside fan favourites, plus
    live tables that run well on mobile. Many new Aussie online casinos add PayID, cards, Neosurf, and crypto from day one, with clearer payout steps and faster verification.
    New online casinos in Australia launch with welcome bundles,
    free spins, and early loyalty perks to win attention.
    Free spins and reload bonuses provide ongoing incentives for continued play.
    From high rollers to new sign-ups and even mobile players, there’s something
    for everyone. These agencies, including
    Slavna Game Studio and QATestLab, employ manual and automated methods
    to certify the fairness of casino games’ RNG. To guarantee this, casinos rely on reputable
    software providers whose RNG (Random Number Generator) systems
    undergo rigorous testing by professional game testing agencies.
    Moreover, these casinos implement mandatory identity verification as a critical measure to prevent
    underage gambling and protect against fraudulent activities.
    From two-factor authentication (2FA) for enhanced
    security to SSL encryption technology that safeguards personal and financial information, these casinos prioritize player protection.

    References:
    https://blackcoin.co/things-you-should-not-do-while-playing-online-casinos/

  22. Accessible from your smartphone or tablet,
    the mobile casino offers a seamless and user-friendly
    interface. Please note that Bitcoin players do not qualify for
    this bonus and should use the code HIGH5. With a deposit of $30
    and the code SK1Y, players will receive 50 Monday free spins.

    Australian players discover a vibrant gaming hub packed with both classic pokies and modern video
    slots at Sky Crown casino. Check out our casino’s key highlights
    in this quick overview table — games, bonuses, payment options, and more at a glance!

    Launched by Hollycorn N.V., Skycrown Casino invites Australian players to experience
    premium online gaming. Premier online casino experience for
    Australian players since 2020. At SkyCrown Casino AU, we encourage all
    players to enjoy pokies and table games as entertainment, not
    income. If you enjoy variety, this bonus lets you test both pokies and live games, making your first days at SkyCrown more rewarding.

    Clearly a fake page trying to imitate the real casino. Don’t miss the chance to claim your welcome bonus and start playing slots today!

    It has excellent encryption protocols to protect your user
    data, providing an environment that feels reliable and safe for all its players.
    Payments are processed quickly and efficiently, making sure players receive their winnings without delay.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>