You are here

README.txt in Conditional Stylesheets 8

Same filename and directory in other branches
  1. 6 README.txt
  2. 7.2 README.txt
ABOUT CONDITIONAL STYLESHEETS
-----------------------------

Internet Explorer implements a proprietary technology called Conditional
Comments. While web developers frown upon technologies that aren't cross-browser
supported, many CSS developers have found Conditional Comments very useful since
they can be used to fix the rendering of CSS in IE by placing IE-only CSS inside
conditional comments.

This module allows themes to easily add conditional stylesheets to the theme's
.info file.


THEME USERS
-----------

You only need to enable this module if a theme requires that you use it. Once it
is enabled, the module automatically performs all of its work for any theme
requiring it. You don't need to configure anything.


THEME DEVELOPERS
----------------

Without this module, the only way to have IE conditional stylesheets was to add
37 lines of code (more if you want to add more than one stylesheet) in two
horribly-difficult-to-remember function calls to your theme's template.php file:

  /**
   * Implements hook_preprocess_html().
   */
  function MYTHEME_preprocess_html(&$variables) {
    // Add conditional stylesheets for IE.
    drupal_add_css(
      drupal_get_path('theme', 'mytheme') . '/css/ie.css',
      array(
        'group' => CSS_THEME,
        'browsers' => array(
          'IE' => 'lte IE 7',
          '!IE' => FALSE,
        ),
        'weight' => 999,
        'every_page' => TRUE,
      )
    );
  }

  /**
   * Implements hook_preprocess_maintenance_page().
   */
  function MYTHEME_preprocess_maintenance_page(&$variables) {
    // Add conditional stylesheets for IE.
    drupal_add_css(
      drupal_get_path('theme', 'mytheme') . '/css/ie.css',
      array(
        'group' => CSS_THEME,
        'browsers' => array(
          'IE' => 'lte IE 7',
          '!IE' => FALSE,
        ),
        'weight' => 999,
        'every_page' => TRUE,
      )
    );
  }

Blech. Who wants to do that?

This module allows you to add "conditional-stylesheets" in a much simpler
manner, by adding lines to your theme's.info.yml file. The syntax for that is:

  conditional-stylesheets:
    EXPRESSION:
      MEDIA:
        css/style.css

  where
    EXPRESSION can be any of the "downlevel-hidden" expressions specified in:
      http://msdn.microsoft.com/en-us/library/ms537512.aspx
    MEDIA can be any of the normal CSS media keywords.

For example, to add a stylesheet that only targets IE 6 and below, use:
  conditional-stylesheets:
    lt IE 7:
      all:
        css/ie6-and-below.css

To add a print stylesheet for IE9 only, use:
  conditional-stylesheets:
    IE 9:
      print:
        css/ie9.css

And to add a print stylesheet for all version of IE, use:
  conditional-stylesheets:
    IE:
      print:
        css/ie9.css

*** IMPORTANT ***

Drupal 8 stores a cache of the data in .info.yml files. If you modify any lines in
your theme's .info.yml file, you MUST rebuild Drupal 8's cache.

File

README.txt
View source
  1. ABOUT CONDITIONAL STYLESHEETS
  2. -----------------------------
  3. Internet Explorer implements a proprietary technology called Conditional
  4. Comments. While web developers frown upon technologies that aren't cross-browser
  5. supported, many CSS developers have found Conditional Comments very useful since
  6. they can be used to fix the rendering of CSS in IE by placing IE-only CSS inside
  7. conditional comments.
  8. This module allows themes to easily add conditional stylesheets to the theme's
  9. .info file.
  10. THEME USERS
  11. -----------
  12. You only need to enable this module if a theme requires that you use it. Once it
  13. is enabled, the module automatically performs all of its work for any theme
  14. requiring it. You don't need to configure anything.
  15. THEME DEVELOPERS
  16. ----------------
  17. Without this module, the only way to have IE conditional stylesheets was to add
  18. 37 lines of code (more if you want to add more than one stylesheet) in two
  19. horribly-difficult-to-remember function calls to your theme's template.php file:
  20. /**
  21. * Implements hook_preprocess_html().
  22. */
  23. function MYTHEME_preprocess_html(&$variables) {
  24. // Add conditional stylesheets for IE.
  25. drupal_add_css(
  26. drupal_get_path('theme', 'mytheme') . '/css/ie.css',
  27. array(
  28. 'group' => CSS_THEME,
  29. 'browsers' => array(
  30. 'IE' => 'lte IE 7',
  31. '!IE' => FALSE,
  32. ),
  33. 'weight' => 999,
  34. 'every_page' => TRUE,
  35. )
  36. );
  37. }
  38. /**
  39. * Implements hook_preprocess_maintenance_page().
  40. */
  41. function MYTHEME_preprocess_maintenance_page(&$variables) {
  42. // Add conditional stylesheets for IE.
  43. drupal_add_css(
  44. drupal_get_path('theme', 'mytheme') . '/css/ie.css',
  45. array(
  46. 'group' => CSS_THEME,
  47. 'browsers' => array(
  48. 'IE' => 'lte IE 7',
  49. '!IE' => FALSE,
  50. ),
  51. 'weight' => 999,
  52. 'every_page' => TRUE,
  53. )
  54. );
  55. }
  56. Blech. Who wants to do that?
  57. This module allows you to add "conditional-stylesheets" in a much simpler
  58. manner, by adding lines to your theme's.info.yml file. The syntax for that is:
  59. conditional-stylesheets:
  60. EXPRESSION:
  61. MEDIA:
  62. css/style.css
  63. where
  64. EXPRESSION can be any of the "downlevel-hidden" expressions specified in:
  65. http://msdn.microsoft.com/en-us/library/ms537512.aspx
  66. MEDIA can be any of the normal CSS media keywords.
  67. For example, to add a stylesheet that only targets IE 6 and below, use:
  68. conditional-stylesheets:
  69. lt IE 7:
  70. all:
  71. css/ie6-and-below.css
  72. To add a print stylesheet for IE9 only, use:
  73. conditional-stylesheets:
  74. IE 9:
  75. print:
  76. css/ie9.css
  77. And to add a print stylesheet for all version of IE, use:
  78. conditional-stylesheets:
  79. IE:
  80. print:
  81. css/ie9.css
  82. *** IMPORTANT ***
  83. Drupal 8 stores a cache of the data in .info.yml files. If you modify any lines in
  84. your theme's .info.yml file, you MUST rebuild Drupal 8's cache.