Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-38441

Style sheet system creates files with > 4095 selectors

XMLWordPrintable

    • MOODLE_24_STABLE, MOODLE_25_STABLE
    • MOODLE_25_STABLE
    • wip-MDL-38441-m25
    • Hide

      Use a better browser.

      This is a joke btw, I understand some are stuck using IE and can't escape its undeniable glory.
      To those in this boat, sorry.

      Show
      Use a better browser. This is a joke btw, I understand some are stuck using IE and can't escape its undeniable glory. To those in this boat, sorry.
    • Hide

      This is an amazingly hard issue to test with confidence. IE stops displaying any styles after the 4095'th in a stylesheet.
      In order to test properly you would need to find a theme with stylesheets containing more than 4095 selectors when combined.
      You'd then need to identify styles being applied to selectors > 4095 and test in IE that with this patch applied those styles are shown.

      To test in best faith you could follow through:

      1. Run the unit tests.
      2. Log in as an admin, ensure theme designer mode is off and then purge your caches.
      3. Using Firefox/Chrome/Safari browse around the site and check things look as expected. Repeat for a couple of themes including standard, bootstrap and a theme based upon bootstrap if there is one yet.
      4. Switch to IE browse around the site and check things look as expected. Repeat for the same themes as above.
      Show
      This is an amazingly hard issue to test with confidence. IE stops displaying any styles after the 4095'th in a stylesheet. In order to test properly you would need to find a theme with stylesheets containing more than 4095 selectors when combined. You'd then need to identify styles being applied to selectors > 4095 and test in IE that with this patch applied those styles are shown. To test in best faith you could follow through: Run the unit tests. Log in as an admin, ensure theme designer mode is off and then purge your caches. Using Firefox/Chrome/Safari browse around the site and check things look as expected. Repeat for a couple of themes including standard, bootstrap and a theme based upon bootstrap if there is one yet. Switch to IE browse around the site and check things look as expected. Repeat for the same themes as above.

      There's a little known bug in IE 6,7,8,9 that means if you have more than 4095 selectors in a single CSS file then the following style rules will be simply ignored.

      Moodle's styles.php puts all the styles from the theme and modules into a single file, following the best practice of the web to reduce download times and increase rendering times.

      But it doesn't do anything if Themes go over this limit. Simply splitting the CSS into two files is enough to work around this bug.

      A test file that shows the bug:
      http://marc.baffl.co.uk/browser_bugs/css-selector-limit/index.html

      A tool to check how many selectors in a CSS file via upload or url:

      http://snippet.bevey.com/css/selectorCount.php

      And some selector counts from standard themes:

      Standard: 4649
      Arialist: 4219
      Moodle.org: 6031

      So it looks like nearly every Moodle theme has sections that are simply ignored on IE < 10, and Moodle.org has nearly 2000 selectors, almost a third of the total, that are being ignored.

      If you were to use just the "Base" theme on it's own (not possible by default) then it, in conjunction with the module CSS would use 3720 selectors, leaving room for 376 selectors for any theme descending from Base, assuming is not excluding any parent theme sheets, before you hit this limit.

            samhemelryk Sam Hemelryk
            bawjaws David Scotson
            Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
            Rajesh Taneja Rajesh Taneja
            Votes:
            0 Vote for this issue
            Watchers:
            13 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.