Drupal Technical

[Drupal] How to fix the css issues in specific OS and browsers using js

Aby.va | | 1 min read

My last work was related to theming a Drupal website. While theming I've faced a major issue ie., in different OS and different browsers the styling of pages have slightly different changes .
How to solve this issue?

Using js we can fix this issue simply. An example js given below:

  • For specific OS
    
  jQuery(document).ready(function ($) {
  var OSName="Unknown OS";
  if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
  else if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
  else if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
  else if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
  if (OSName == 'MacOS') {
    //Apply styles.
    $("#atdw_search_term input#edit-term").css("width","30%");
  }
  if (OSName == 'Windows') {
    //Apply styles.
  }
  });
  • For specific browsers
    
  jQuery(document).ready(function ($) {
    if(navigator.userAgent.search("Firefox") > -1) {  //For 'firefox'.
      $("#atdw_seach_category select").css("text-indent","4px");
    }
    if(navigator.userAgent.search("Safari") > -1) {  //For 'Safari'.
      $("#atdw_seach_category select").css("text-indent","4px");
    }
    if (navigator.userAgent.indexOf('MSIE') >-1) { //For 'Internet exploder'.
      $("#progressDiv").css("background-color","lavender");
    }
    if (navigator.userAgent.indexOf('Chrome') >-1) { //For 'Chrome'.
      $("#progressDiv").css("background-color","lavender");
    }
  });

By using the combination of these browsers and os, we can write the specific styles for specific systems.

Please let us know if we can be of any further help on Drupal theme Development.

 

 

Related Topics