我可以根据浏览器更改 CSS 规则吗？

Question

我正在处理的项目中有一个块引用，如果正在使用 Chrome 查看页面，我希望更改文本对齐。 Chrome 似乎无法识别 text-align-last 所以我宁愿将所有对齐方式更改为 text-align:center;如果使用 Chrome 查看。

如果用另一个浏览器查看它，我希望规则是 text-align: justify; text-align-last: center;.

有没有办法做到这一点？

Answer 1

Browser sniffing 不好，你应该改用feature detection。

在这种情况下，您可以使用@supports：

#target {
  text-align: center;
}
@supports (-moz-text-align-last: center) or (text-align-last: center) {
  #target {
    text-align: justify;
    -moz-text-align-last: center;
    text-align-last: center
  }
}

#target {
  text-align: center;
}
@supports (-moz-text-align-last: center) or (text-align-last: center) {
  #target {
    text-align: justify;
    -moz-text-align-last: center;
    text-align-last: center
  }
}

<div id="target">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</div>

Answer 2

是的，您可以使用 JavaScript 更改 css 样式（JQuery 更容易）。 JavaScript 还可以检测正在使用的浏览器，因此您可以使用 if 语句来更改基于浏览器的 css 代码：

if($.browser.chrome) {}

使用 JQuery 更改 css 代码的示例：

$("p").css("align", "right");

Answer 3

如果您想使用仅 CSS 的 Hack 来检测 Chrome，您可以使用以下方法：

@media screen and (-webkit-min-device-pixel-ratio:0)
{ 
    #element { properties:value; } 
}

更多浏览器特定的黑客可以在这里找到：

https://css-tricks.com/snippets/css/browser-specific-hacks/

出于历史目的：

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }