Edición de estilos para marcos CSS en JS
En la pestaña Estilos , puede copiar las declaraciones de una regla de estilo de una manera que tenga formato para JavaScript y esté listo para pegarse en un archivo JavaScript. Esto incluye reglas de estilo definidas por llamadas de función CSS en JS. También puede editar reglas de estilo que se definieron inicialmente mediante una llamada de función CSS en JS.
Copia de declaraciones de regla de estilo para pegarlas con sintaxis de JavaScript
En el panel Estilos , puede copiar las declaraciones de una regla de estilo de forma que tenga formato para JavaScript y esté listo para pegarse en un archivo JavaScript.
Al usar bibliotecas CSS en JS, puede copiar declaraciones CSS (una propiedad y un valor CSS) para que se les dé formato automáticamente para JavaScript. No es necesario editar manualmente el CSS copiado para que coincida con la sintaxis de JavaScript. Puede copiar una sola declaración CSS o todas las declaraciones de una regla de estilo y pegarlas directamente en un archivo JavaScript sin problemas de sintaxis.
Para copiar una regla de estilo como JavaScript:
En DevTools, abra la herramienta Elementos y, a continuación, haga clic en la pestaña Estilos .
Haga clic con el botón derecho en una declaración en una regla de estilo y, a continuación, seleccione Copiar declaración como JS o Copiar todas las declaraciones como JS.
Pegue el CSS copiado en un archivo JavaScript en el editor de texto, como Visual Studio Code. Por ejemplo:
'--more-link': 'lime'.
Para obtener más información sobre cómo ver y cambiar CSS, consulte Referencia de características css.
Edición de reglas de estilo definidas inicialmente por una función CSSOM
El panel Estilos admite la edición de estilos creados con las API del modelo de objetos CSS (CSSOM ). Muchos marcos y bibliotecas CSS en JS usan las API del modelo de objetos CSS bajo el capó para construir estilos.
Puede editar los estilos que se agregaron en JavaScript mediante la CSSStyleSheet interfaz , que es una manera de crear y distribuir estilos reutilizables al usar Shadow DOM. Vea La CSSStyleSheet interfaz en el modelo de objetos CSS (CSSOM).
Ejemplo
En este código de ejemplo, las reglas de estilo se definen inicialmente mediante una llamada a una función CSS Object Model (CSSOM) y, a continuación, las reglas de estilo se editan mediante el panel Estilos . El CSSStyleSheet objeto contiene las API de CSSOM, como insertRule(). Los h1 estilos agregados inicialmente por una CSSStyleSheet función se pueden editar en el panel Estilos .
//Add CSS-in-JS button
function addStyle() {
const sheet = new CSSStyleSheet();
sheet.insertRule(`h1 {
background: pink;
text-transform: uppercase;
}`);
document.adoptedStyleSheets = [sheet];
}
En este ejemplo se muestra cómo cambiar la background propiedad de los h1 estilos que agrega la función insertRule()Modelo de objetos CSS . El background color se establece inicialmente mediante una llamada a una función de modelo de objetos CSS y, a continuación, se puede cambiar de pink a lightblue mediante el panel Estilos .
Pruebe esta característica con un ejemplo que use CSS-in-JS.
¿Qué es CSS en JS?
Esta sección es un extracto de la entrada de blog compatibilidad con CSS-in-JS en DevTools.
Esto es lo que queremos decir con CSS en JS y cómo es diferente de CSS normal. La definición de CSS-in-JS es algo vaga. En un sentido amplio, es un enfoque para administrar código CSS mediante JavaScript. Por ejemplo, podría significar que el contenido CSS se define mediante JavaScript y que la aplicación genera la salida css final sobre la marcha.
En el contexto de DevTools, CSS-in-JS significa que las API del modelo de objetos CSS insertan el contenido CSS en la página. Css normal se inserta mediante <style> elementos o <link> y tiene un origen estático (como un nodo DOM o un recurso de red). Por el contrario, CSS en JS a menudo no tiene un origen estático.
Un caso especial aquí es que el contenido de un <style> elemento se puede actualizar mediante la API del modelo de objetos CSS, lo que hace que el origen deje de sincronizarse con la hoja de estilos CSS real.
Si usa cualquier biblioteca CSS en JS (como styled-component, Emotion o JSS), la biblioteca podría insertar estilos mediante las API del modelo de objetos CSS bajo el capó, dependiendo del modo de desarrollo y del explorador.
Echemos un vistazo a algunos ejemplos de cómo se puede insertar una hoja de estilos mediante la API de modelo de objetos CSS, similar al enfoque usado por algunas bibliotecas CSS en JS.
// Insert new rule to an existing CSS stylesheet
const element = document.querySelector('style');
const stylesheet = element.sheet;
stylesheet.replaceSync('.some { color: blue; }');
stylesheet.insertRule('.some { color: green; }');
También puede crear una hoja de estilos completamente nueva:
// Create a completely new stylesheet
const sheet = new CSSStyleSheet();
stylesheet.replaceSync('.some { color: blue; }');
stylesheet.insertRule('.some { color: green; }');
// Apply constructed stylesheet to the document
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
Compatibilidad con CSS en DevTools
En DevTools, la característica más usada al tratar con CSS es el panel Estilos . En el panel Estilos , puede ver qué reglas CSS en JS se aplican a un elemento determinado. También puede editar las reglas CSS en JS y ver los cambios en la página en tiempo real.
El panel Estilos admite reglas CSS que puede modificar mediante las API del modelo de objetos CSS. Los estilos CSS en JS a veces se describen como construidos, para indicar que estos estilos se construyeron mediante api web.
Nota:
Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y usadas según los términos descritos en la licencia internacional creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Alex Rudenko (Technical Writer, Chrome DevTools & Lighthouse).
Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.