我想自定义网站的 css 并保存以供 Mozilla 加载。这样当 Mozilla 从该 url 加载 html 时,它会使用我的 css 文件而不是外部文件。我不知道如何让 Mozilla 做到这一点,当我向 url 发出新请求时,会加载站点的 css 而不是我的。我该如何设置?
3 回答
为了那个原因
您可以扫描用户代理并找出哪个浏览器及其版本。包括操作系统特定样式的操作系统您可以使用针对特定浏览器的各种 CSS Hacks 或脚本或插件来识别浏览器并将各种类应用于元素
使用 jQuery
您所追求的是浏览器检测:
if ($.browser.mozilla) { ...
但是,不鼓励浏览器嗅探,因为它很容易欺骗用户代理,即伪装成另一个浏览器!
你最好使用特征检测,要么以你自己的方式,要么通过 jQuery.support 接口:http ://api.jquery.com/jQuery.support/
这是一篇关于扩展它以供您自己使用的文章:http ://www.waytoocrowded.com/2009/03/14/jquery-supportminheight/
使用 PHP
看
http://php.net/manual/en/function.get-browser.php
http://techpatterns.com/downloads/php-browser-detection-basic.php
http://techpatterns.com/downloads/php_browser_detection.php (contains JS also)
然后根据检测到的浏览器创建动态 CSS 文件 这是一个 CSS 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 }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
来源: http: //paulirish.com/2009/browser-specific-css-hacks/
如果你想使用插件,那么这里是一个
The most straightforward way for most of us would be using the Mozilla Firefox addon called Stylish. It lets you write, save and use own stylesheets for a particular page or domain, overriding (if necessary) parts of authors own rule(s).
Under the hood it's not much more than built-in Firefox facilities though - you have the userContent.css
file which, using CSS' own supported @document
syntax and !important
after a rule, accomplishes exactly what you're after.
This is all at the heart of CSS actually. It is more or less designed to allow users to override authors stylesheets, and Firefox makes it somewhat easy to do that.
You can obtain a much more extensive explanation here.
看看greasemonkey插件:https ://addons.mozilla.org/de/firefox/addon/greasemonkey/