A veces, el contenido debe centrarse en el navegador en particular. Este artículo apunta al navegador Firefox para mostrar la propiedad CSS. El CSS dirigido solo funcionará para el navegador objetivo. Apunte al navegador Firefox con CSS de muchas maneras. Algunos de ellos se analizan a continuación:
Método 1: este método utiliza la extensión específica de Mozilla para agregar la propiedad CSS. Esta extensión proporciona la propiedad CSS solo en el navegador Firefox.
Sintaxis:
@-moz-document url-prefix() {
element {
// CSS Property
}
}
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Targeting firefox with CSS</title>
<style type="text/css">
@-moz-document url-prefix() {
h1 {
color: green;
font-size: 34px;
text-align: center;
}
p {
font-size: 24px;
text-align: center;
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science portal for geeks. It contains
well written, well thought and well explained computer
science and programming articles, quizzes etc. </p>
</body>
</html>
Producción
Método 2: la propiedad CSS -moz-appearance se usa en Gecko (Firefox) para mostrar un elemento usando un estilo nativo de plataforma basado en el tema del sistema operativo.
Sintaxis:
@supports (-moz-appearance:none) {
element {
// CSS Property
}
}
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Targeting firefox with CSS</title>
<style type="text/css">
@supports (-moz-appearance:none) {
h1 {
color: green;
font-size: 34px;
text-align: center;
}
p {
font-size: 24px;
text-align: center;
display:block;
padding: 20px;
background: green;
color: white;
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science portal for geeks. It contains
well written, well thought and well explained computer
science and programming articles, quizzes etc. </p>
</body>
</html>
Producción:
Nota: el estilo CSS de los ejemplos anteriores solo funcionará en los navegadores Firefox.
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA