Define css with php according to the browser

Asked

Viewed 129 times

3

This morning I did this question.

What I need to know is how can I do something like this:

  • Check whether or not the browser is Safari.

  • If it is, section#internal.services aside ul li a should receive this css:

CSS applied:

color:#666666;
display:block;
font:normal normal bold 15px/normal Questrial, Arial;
height:70px;
line-height:4em;

What would be the best way to do this, with php?

  • The html page is generated from a template engine like dwoo or Smarty?

  • @Ricardo No...

  • How is it generated? post here

  • @Sorry, I’m new to programming, I don’t understand what you mean...

  • I posted for you the answer, check. I tested here and it’s working correctly.

  • I edited my answer as I did not have your two Css links to give the same effect.

Show 1 more comment

2 answers

3

It is possible to check the user agent this way:

  <?php
    $useragent = $_SERVER['HTTP_USER_AGENT'];

  if (preg_match('|MSIE ([0-9].[0-9]{1,2})|',$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = 'IE';
  } elseif (preg_match( '|Opera/([0-9].[0-9]{1,2})|',$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = 'Opera';
  } elseif(preg_match('|Firefox/([0-9\.]+)|',$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = 'Firefox';
  } elseif(preg_match('|Chrome/([0-9\.]+)|',$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = 'Chrome';
  } elseif(preg_match('|Safari/([0-9\.]+)|',$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = 'Safari';
  } else {
    $browser_version = 0;
    $browser= 'other';
  }
?>

<html>
    <head>
        <title></title>
        /*<?php 
            if($browser == 'Safari')
                echo '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">';
            else
                echo '<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>';
         ?>*/
    </head>
    <body>
         <?php 
              if($browser == 'Safari'){
                  echo '<span id="#internal"></span>';
              }else{
                  echo '<span></span>';
              }
         ?>
    </body>
</html>

As the AP’s wish was applied the id specified to the element if the browser is safari. It is necessary that the style that will be applied to the element when in safari is in css.

Addendum: It’s still possible with this Super Global $_SERVER['HTTP_USER_AGENT'] identify which the SO

  • Thanks for the reply, can you show me how I can do using css in html? I mean without calling an external file.

  • For example, if it’s safari section#internal.services aside ul liwill get that css I passed in question

  • I added my html to the question, I would like to add css using the tag <style> for element Section#Internal.services aside ul li a

  • Sorry, I don’t think I explained myself well. I need the element section#internal.services aside ul li a get a css if you’re in safari, if you’re in safari, get another css. But I want to do it in the same file. Using <style> section#internal.services aside ul li a { ..........}</style>.

  • But in my example you can define it. However, it is not possible if it is external... It needs to be in the same file that is receiving the CSS page, because you can’t interact CSS within a file. css, only if it is inside the <style>

  • @Skyirn For what you want I think there are two solutions one would be the first one I had done where there is a selection between css files (this in my reply marked with comments) the other option would be Andrebaill’s

Show 1 more comment

2


You can search the useragent, and check the browser, and based on that, you can then set your css.

Follow the example:

 if (preg_match('|MSIE ([0-9].[0-9]{1,2})|',$useragent,$matched)) {
    $css = "border: solid 5px blue;";
    $browser = 'IE';
  } elseif (preg_match( '|Opera/([0-9].[0-9]{1,2})|',$useragent,$matched)) {
    $css = "border: solid 5px blue;";
    $browser = 'Opera';
  } elseif(preg_match('|Firefox/([0-9\.]+)|',$useragent,$matched)) {
    $css = "border: solid 5px red;";
    $browser = 'Firefox';
  } elseif(preg_match('|Chrome/([0-9\.]+)|',$useragent,$matched)) {
    $css = "border: solid 5px blue;";
    $browser = 'Chrome';
  } elseif(preg_match('|Safari/([0-9\.]+)|',$useragent,$matched)) {
    $css = "border: solid 5px red;";
    $browser = 'Safari';
  } else {
    $css = "border: solid 5px red;";
    $browser= 'other';
  }

Use as follows:

In the $css i include the CSS, and then you can put:

<style> 
     section#internal.services aside ul li a { 
       <?php echo $css; ?>
     }
</style>

With this, you will import css correctly.

  • André, how would define the css so doing?

  • The check works correctly, but I don’t understand how I can define css! It can help me?

  • You can put the CSS inside $css or you can set the CSS separately... <link rel="stylesheet" href=.... > if it is Firefox, or if it is the others, you can define the other css.

  • But how do I say my element should receive the style within $css?

  • I set an example for you

  • If you want to add in skype @Skyirn - srandrebaill - I always stay there more than on the site.. Needing, just call. I answer here whenever I see.

  • Thank you very much!

  • My answer was correct?

  • I’m testing, if it works I’ll mark it as accepted!

  • Okay, no problem at all! :)

  • @Skyirn I changed my answer, check if it meets your need.

  • Andre, I did it that way, but it didn’t work ):

  • is giving in all browsers that is safari

  • I got it, thank you!

  • Just in case, I also changed the code with all the browsers, @Ricardo suggestion, to make the correct iteration. In case you have any questions, we’re all here!

  • Thank you so much for your help!

Show 11 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.