Specify CSS's for webkit/IE without separate CSS_问答_开发者

Specify CSS's for webkit/IE without separate CSS

开发者 https://www.devze.com 2023-04-09 03:24 出处：网络

For 开发者_开发技巧IE I can use this: .content { *padding: 10px; padding: 10px } By doing so, the *-part will only be used for IE. Is there a tric like this for webkit browsers too? (Whitout having

相关专题：css webkit

For 开发者_开发技巧IE I can use this:

.content {
   *padding: 10px;
   padding: 10px
}

By doing so, the *-part will only be used for IE. Is there a tric like this for webkit browsers too? (Whitout having them called to a special .css for webkit browsers?)

I found a new way instead of using get_browser() for those who doesn't have the extension installed. This new way is by using HTACCESS instead. You need the module "mod_setenvif" installed.

Here is the code you need to put in the .htaccess file. It's a regexp over the HTTP_USER_AGENT server variable. If it matches, we create a USER_AGENT variable to store the matching browser name.

<IfModule mod_setenvif.c>
BrowserMatch "Mozilla" USER_AGENT=firefox
BrowserMatch "Safari" USER_AGENT=safari
BrowserMatch "Chrome" USER_AGENT=chrome
BrowserMatch "MSIE" USER_AGENT=ie
</IfModule>

Then, you can use the new server variable in your PHP code.

<body class="<?php echo $_SERVER['USER_AGENT'];?>">

Have a good day.

There's not such a hack for webkit-based browsers. However, you can achieve such an effect (in multiple browsers) using:

<script>
(function(){ //anonymous function to prevent leaking
  var d = document.createElement("div");
  d.style.cssText = "-webkit-border-radius:1px;"; // webkit, such as Chrome/Safari
  if(/webkit/i.test(d.style.cssText)){
      var style = document.createElement("style");
      style.src = "webkit-only.css";
      document.getElementsByTagName("head")[0].appendChild(style);
  }
})();
</script>

The key behind this solution is that unknown CSS declarations are ignored by a browser. The -webkit- prefix will only be available in webkit-based browsers.

Similarly, the following prefixes can be used to detect other browser engines:

-moz-border-radius:1px; - Gecko, such as Firefox
-o-border-radius:0; - Opera
-ms-border-radius:0; - Trident, such as Internet Explorer

There's a chance that your user has an ancient browser which don't support border-radius, but since Chrome is usually kept up-to-date (auto-update), the webkit solution should always work.

Found a decent hack. Seems to work at first sight :)

@media screen and (-webkit-min-device-pixel-ratio:0) {
     div.panel-homepage div#plan-build-operate div.panel-pane ul.links a { padding-top: 20px;}
}

If you work with PHP, there is a function call :

get_browser()

check at : http://php.net/manual/fr/function.get-browser.php

This function returns an array of all the information about the client browser. Add these informations as CSS class in your body tag.

You will be able to target specific browser without using CSS hack and have a valid CSS code.

Good luck!

Use the following to target Webkit:

x:-webkit-any-link { padding: 10px; }

If you need to support IE7, add the following to filter this rule from applying to it:

 * > /**/ .content, x:-webkit-any-link { padding: 10px; }

Specify CSS's for webkit/IE without separate CSS

精彩评论

关注公众号

热门标签

图文推荐

Specify CSS's for webkit/IE without separate CSS

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：