Intelligentere benutzerdefinierte Eigenschaften mit der neuen Houdini-API

Propiedades personalizadas de CSSConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a Plus, también conocidas como CSS-VariablenMit dieser Option können Sie Ihre eigenen Eigenschaften in CSS definieren und deren Werte in Ihrem gesamten CSS verwenden. Obwohl sie heute unglaublich nützlich sind, haben sie Mängel, die es schwierig machen können, mit ihnen zu arbeiten: Sie können jeden Wert annehmen, so dass sie versehentlich mit etwas Unerwartetem überschrieben werden können, sie erben ihre Werte immer von ihren Eltern und Ihnen kann nicht übergehen. Mit Houdinis CSS-Eigenschaften- und Werte-API-Ebene 1Diese Mängel, die jetzt in Chrome 78 verfügbar sind, werden behoben und machen benutzerdefinierte CSS-Eigenschaften unglaublich leistungsfähig!

Was ist Houdini?

Antes de hablar sobre la nueva APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene Plus, hablemos de Houdini rápidamente. El grupo de trabajo CSS-TAG Houdini, más conocido como CSS Houdini o simplemente Houdini, existe para «desarrollar funciones que expliquen la ‘magia’ del estilo y el diseño en la web». La colección de Houdini-Spezifikationen están diseñados para abrir el poder del motor de renderizado del BrowserUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los Plus, lo que permite una visión más profunda de nuestros estilos y la capacidad de ampliar nuestro motor de renderizado. Con esto, finalmente es posible escribir valores CSS en JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar Plus y polyfilling o inventar un nuevo CSS sin un impacto en el rendimiento. Houdini tiene el potencial de potenciar la creatividad en la web.

CSS-Eigenschaften- und Werte-API-Ebene 1

das CSS-Eigenschaften- und Werte-API-Ebene 1 (Houdini Props and Vals) ermöglicht es uns, unseren benutzerdefinierten Eigenschaften Struktur zu verleihen. Dies ist die aktuelle Situation bei Verwendung benutzerdefinierter Eigenschaften:

.thing {
--Meine farbe: green;
}

Da benutzerdefinierte Eigenschaften keine Typen haben, können sie auf unerwartete Weise überschrieben werden. Überlegen Sie beispielsweise, was passiert, wenn Sie definieren --Meine farbe mit einer UrlEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo Plus.

.thing {
--Meine farbe: URL('not-a-color');
Farbe: var(--Meine farbe);
}

Hier weil --Meine farbe Es ist nicht geschrieben, es weiß nicht, dass eine URL kein gültiger Farbwert ist. Wenn wir es verwenden, werden die Standardeinstellungen wiederhergestellt (schwarz für Farbetransparent für Hintergrund). Mit Houdini Requisiten und Vals können benutzerdefinierte Eigenschaften sein Eingetragen Der Browser weiß also was sollte sein!

Nun die benutzerdefinierte Eigenschaft --Meine farbe ist als Farbe registriert! Dies teilt dem Browser mit, welche Arten von Werten zulässig sind und wie er diese Eigenschaft schreiben und verarbeiten kann!

Anatomie eines eingetragenen Eigentums

Die Registrierung einer Immobilie sieht folgendermaßen aus:

Fenster.CSS.registerProperty({
Süßkartoffel: '--my-color',
Syntax: '<color>',
inherits: falsch,
initialValue: 'black',
});

Unterstützt die folgenden Optionen:

Name: Zeichenfolge

Der Name der benutzerdefinierten Eigenschaft.

Syntax: Zeichenfolge

So analysieren Sie die benutzerdefinierte Eigenschaft. Eine vollständige Liste der möglichen Werte finden Sie in der CSS-Werte und Einheiten Spezifikation. Standardmäßig *.

erbt: boolean

Wenn er den Wert von seinem Vater erbt. Standardmäßig wahr.

initialValue: Zeichenfolge

Anfangswert der benutzerdefinierten Eigenschaft.

Bei näherer Betrachtung Syntax. Es gibt eine Reihe von gültige Optionen
von Zahlen über Farben bis hin zu

Typen. Diese Syntax kann auch mit den folgenden Werten geändert werden

• Anhängen + bedeutet, dass eine durch Leerzeichen getrennte Liste von Werten aus dieser Syntax akzeptiert wird. Zum Beispiel, + wäre eine Liste von Längen, die durch Leerzeichen getrennt sind
• Anhängen# bedeutet, dass eine durch Kommas getrennte Liste von Werten aus dieser Syntax akzeptiert wird. Zum Beispiel, # Es wäre eine Liste von Farben, die durch Kommas getrennt sind
• Hinzufügen | zwischen Syntax oder Bezeichnern bedeutet, dass alle angegebenen Optionen gültig sind. Zum Beispiel, # | | Magie würde eine Liste von Farben erlauben, die durch Kommas, eine URL oder das Wort getrennt sind Magie.

Fallstricke

Es gibt zwei Fallen mit Houdini Props und Waltz. Das erste ist, dass es nach der Definition keine Möglichkeit gibt, eine vorhandene registrierte Eigenschaft zu aktualisieren. Wenn Sie versuchen, eine Eigenschaft erneut zu registrieren, wird ein Fehler zurückgegeben, der darauf hinweist, dass sie bereits definiert wurde.

Zweitens werden registrierte Eigenschaften im Gegensatz zu Standardeigenschaften beim Analysieren nicht validiert. Sie werden vielmehr validiert, wenn sie berechnet werden. Dies bedeutet, dass ungültige Werte bei der Überprüfung der Eigenschaften des Elements nicht als ungültig angezeigt werden und das Einfügen einer ungültigen Eigenschaft nach einer gültigen Eigenschaft nicht zu einer gültigen zurückgesetzt wird. Eine ungültige Eigenschaft wird jedoch auf den Standardwert der registrierten Eigenschaft zurückgesetzt.

Benutzerdefinierte Eigenschaften animieren

Eine registrierte benutzerdefinierte Eigenschaft bietet einen unterhaltsamen Bonus, der über die Typprüfung hinausgeht - die Möglichkeit, sie zu animieren! Ein einfaches Animationsbeispiel sieht folgendermaßen aus:

<Skript>
CSS.registerProperty({
Süßkartoffel: '--stop-color',
Syntax: '<color>',
inherits: falsch,
initialValue: 'blue',
});
</Skript>
<Stil>
Taste {
--stop-color: Netz;
transition: --stop-color: 1s;
}
button:hover {
--stop-color: green;
}
</Stil>

Wenn Sie mit der Maus über die Schaltfläche fahren, wird sie von rot nach grün animiert! Ohne Registrierung der Eigenschaft springt sie von einer Farbe in eine andere, da der Browser ohne Registrierung nicht weiß, was zwischen einem Wert und dem nächsten zu erwarten ist, und daher die Übergangsfähigkeit nicht garantieren kann. Dieses Beispiel kann jedoch noch einen Schritt weiter gehen, um CSS-Gradienten zu animieren. Das folgende CSS kann mit derselben registrierten Eigenschaft geschrieben werden:

Taste {
--stop-color: Netz;
Hintergrund: linearer Gradient(var(--stop-color), black);
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}

Dadurch wird unsere benutzerdefinierte Eigenschaft animiert, die Teil der ist linearer Gradientund animieren so unseren linearen Gradienten. Schauen Sie sich den Glitch unten an, um den vollständigen Code in Aktion zu sehen und selbst damit herumzuspielen.

Fazit

Houdini ist unterwegs a los BrowserConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet Plus y, con ello, formas completamente nuevas de trabajar y ampliar CSS. Con el Paint API Unsere kreative Toolbox ist bereits ausgeliefert und jetzt mit benutzerdefinierten Requisiten und Vals ausgestattet. Sie ermöglicht es uns, geschriebene CSS-Eigenschaften zu definieren und sie zum Erstellen und Animieren neuer und aufregender Designs zu verwenden. Weitere sind auch unterwegs, in der Houdinis Problemwarteschlange Hier können Sie Ihre Meinung abgeben und sehen, was als nächstes für Houdini kommt. Houdini existiert, um Funktionen zu entwickeln, die die "Magie" von Stil und Design im Web erklären. Gehen Sie also raus und nutzen Sie diese magischen Funktionen.

Foto von
Maik Jonietz
im
Unsplash