{"id":3309,"date":"2026-10-08T22:09:17","date_gmt":"2026-10-08T22:09:17","guid":{"rendered":"https:\/\/alexcgdesign.com\/blog\/?p=3309"},"modified":"2026-10-08T22:33:55","modified_gmt":"2026-10-08T22:33:55","slug":"3-caracteristicas-css","status":"publish","type":"post","link":"https:\/\/alexcgdesign.com\/blog\/3-caracteristicas-css\/","title":{"rendered":"3 caracter\u00edsticas que no conoc\u00edas de CSS: @starting-style, transition-behavior y nesting"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3309\" class=\"elementor elementor-3309\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-538d0c2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"538d0c2\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3a748fad\" data-id=\"3a748fad\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f4566d3 elementor-widget elementor-widget-html\" data-id=\"f4566d3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div style=\"position:relative;width:100%;aspect-ratio:16\/9;margin:0 0 24px\"><iframe src=\"https:\/\/www.youtube.com\/embed\/vTFeJyYmZHQ\" title=\"3 caracter\u00edsticas que no conoc\u00edas de CSS\" style=\"position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:12px\" loading=\"lazy\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-014523b elementor-widget elementor-widget-html\" data-id=\"014523b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div style=\"display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:#eff6ff;border:2px solid #2872FA;border-radius:12px;padding:20px 24px;margin:0 0 28px\"><div style=\"flex:1 1 260px\"><div style=\"font-weight:700;font-size:18px;color:#192a3d\">\ud83d\udcbb Descarga el c\u00f3digo del proyecto<\/div><div style=\"color:#192a3d;margin-top:4px\">El buscador con popover completo (HTML y CSS) listo para abrir y probar.<\/div><\/div><a href=\"https:\/\/github.com\/AlexCGDesign\/3-propiedades-menu-buscador\" target=\"_blank\" rel=\"noopener\" style=\"display:inline-block;background:#2872FA;color:#fff;font-weight:600;font-size:16px;padding:14px 28px;border-radius:8px;text-decoration:none;white-space:nowrap\">Descargar el c\u00f3digo en GitHub \u2192<\/a><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8027431 elementor-widget elementor-widget-heading\" data-id=\"8027431\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Es hora de cambiar como se escribe CSS.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-898ca0e elementor-widget elementor-widget-text-editor\" data-id=\"898ca0e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>CSS ha cambiado bastante en estos a\u00f1os, es algo que me alegra muchisimo. Cosas que antes necesitaban <strong>JavaScript, trucos con <code>visibility<\/code> o un preprocesador como <code>Sass<\/code><\/strong> hoy se resuelven con una o dos l\u00edneas de CSS nativo.<\/p>\n<p>El problema es que estas novedades no se hacen tan populares, es como tener al amor de tu vida a 2 cuadras de tu casa y no verla:(, esto hace que mucha gente siga escribiendo CSS como hace 5 a\u00f1os. En este art\u00edculo veremos 3 caracter\u00edsticas que ya puedes empezar a usar en tu d\u00eda a d\u00eda: <strong><code>@starting-style<\/code><\/strong>, <strong><code>transition-behavior<\/code><\/strong> y el <strong><code>nesting<\/code><\/strong>.\u00a0 (Me lo agradecer\u00e1s)<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-77e0867 elementor-widget elementor-widget-heading\" data-id=\"77e0867\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Antes y hoy<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6779388 elementor-widget elementor-widget-html\" data-id=\"6779388\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div style=\"overflow-x:auto\"><table style=\"border-collapse:collapse;width:100%\"><thead><tr><th style=\"text-align:left;padding:10px;border-bottom:2px solid #cbd5e1\">Lo que queremos hacer<\/th><th style=\"text-align:left;padding:10px;border-bottom:2px solid #cbd5e1\">Antes<\/th><th style=\"text-align:left;padding:10px;border-bottom:2px solid #cbd5e1\">Hoy<\/th><\/tr><\/thead><tbody><tr><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\">Animar un elemento que acaba de aparecer<\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\">JavaScript: a\u00f1adir una clase un instante despu\u00e9s<\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\"><code>@starting-style<\/code><\/td><\/tr><tr><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\">Animar un <code>display: none<\/code> a visible (y al rev\u00e9s)<\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\">JavaScript con <code>transitionend<\/code>, o trucos con <code>visibility<\/code><\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\"><code>transition-behavior: allow-discrete<\/code><\/td><\/tr><tr><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\">Escribir selectores sin repetirlos<\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\"><code>Sass<\/code> o <code>Less<\/code>, con un paso de compilaci\u00f3n<\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\"><code>nesting<\/code> nativo<\/td><\/tr><\/tbody><\/table><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ae054bb elementor-widget elementor-widget-text-editor\" data-id=\"ae054bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<blockquote style=\"border-left:4px solid #94a3b8;margin:16px 0;padding:6px 18px\"><p>En pocas palabras: cada una de estas caracter\u00edsticas elimina una dependencia, ya sea JavaScript para animar o un preprocesador para organizar.<\/p><\/blockquote>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9e1016b elementor-widget elementor-widget-heading\" data-id=\"9e1016b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">\u00bfPor qu\u00e9 usarlas desde hoy?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d09db5a elementor-widget elementor-widget-text-editor\" data-id=\"d09db5a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong>Menos JavaScript:<\/strong> las animaciones de entrada y salida pasan a ser solo CSS.<\/li><li><strong>Menos herramientas:<\/strong> no necesitas compilar <code>Sass<\/code> solo para anidar selectores.<\/li><li><strong>Ya funcionan<\/strong> en las versiones actuales de Chrome, Safari y Firefox.<\/li><li><strong>Las dos de animaci\u00f3n degradan bien:<\/strong> si un navegador no las entiende, el elemento simplemente aparece sin animaci\u00f3n y sigue funcionando.<\/li><\/ul><div style=\"background:#fef2f2;padding:14px 18px;border-radius:8px;margin:16px 0\">\ud83d\udca1 Con el <code>nesting<\/code> es distinto: un navegador que no lo entienda ignora esas reglas anidadas. Antes de usarlo revisa el soporte en MDN o en caniuse, seg\u00fan los navegadores que debas cubrir.<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d91943 elementor-widget elementor-widget-heading\" data-id=\"1d91943\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">\u00bfQu\u00e9 necesito para seguir este art\u00edculo?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9360b00 elementor-widget elementor-widget-text-editor\" data-id=\"9360b00\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Solo necesitas saber lo b\u00e1sico de <code>transition<\/code> (propiedad, duraci\u00f3n) y haber visto alguna vez el atributo <code>popover<\/code>. Si nunca has usado transiciones en CSS, ve primero a ese tema y regresa.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ba67a28 elementor-widget elementor-widget-heading\" data-id=\"ba67a28\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Nuestro banco de pruebas<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2310c13 elementor-widget elementor-widget-text-editor\" data-id=\"2310c13\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Para ver las 3 caracter\u00edsticas en acci\u00f3n usaremos un buscador con <code>popover<\/code>, una ventana flotante de HTML que no necesita JavaScript. Pero quiero que te fijes en las <strong>propiedades<\/strong>, no en el componente: lo mismo que veremos aqu\u00ed lo puedes aplicar a modales, men\u00fas, tooltips y notificaciones.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c91397 elementor-widget elementor-widget-heading\" data-id=\"7c91397\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Archivos para este proyecto<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eb7666d elementor-widget elementor-widget-text-editor\" data-id=\"eb7666d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Crear una carpeta llamada <code>paleta<\/code> y dentro de ella dos archivos: <code>index.html<\/code> y <code>estilos.css<\/code>.<\/p><p>Si prefieres no escribirlo todo, <a href=\"https:\/\/github.com\/AlexCGDesign\/3-propiedades-menu-buscador\" target=\"_blank\" rel=\"noopener\"><strong>descarga el c\u00f3digo completo desde GitHub<\/strong><\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-abfcb51 elementor-widget elementor-widget-heading\" data-id=\"abfcb51\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">El HTML de nuestra paleta<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2a1521f elementor-widget elementor-widget-text-editor\" data-id=\"2a1521f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Vamos a necesitar un bot\u00f3n que abra la paleta y un contenedor con el atributo <code>popover<\/code>. El atributo <code>popovertarget<\/code> conecta el bot\u00f3n con el contenedor por su <code>id<\/code>, sin JavaScript.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0581e9e elementor-widget elementor-widget-html\" data-id=\"0581e9e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class=\"wp-block-code language-html\"><code class=\"language-html\">&lt;!-- index.html --&gt;\n&lt;link rel=\"stylesheet\" href=\"estilos.css\"&gt;\n\n&lt;button popovertarget=\"paleta\"&gt;Abrir paleta de comandos&lt;\/button&gt;\n\n&lt;div id=\"paleta\" class=\"palette\" popover&gt;\n\t&lt;input type=\"text\" placeholder=\"Busca un comando...\"&gt;\n\t&lt;ul&gt;\n\t\t&lt;li&gt;Crear carpeta&lt;\/li&gt;\n\t\t&lt;li&gt;Abrir proyecto&lt;\/li&gt;\n\t\t&lt;li&gt;Cambiar tema&lt;\/li&gt;\n\t&lt;\/ul&gt;\n&lt;\/div&gt;<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dccc12c elementor-widget elementor-widget-text-editor\" data-id=\"dccc12c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div style=\"background:#faf5ff;padding:14px 18px;border-radius:8px;margin:16px 0\">\ud83e\udde0 Momento de pasar al c\u00f3digo CSS. (Manos a la obra)<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e7e6d30 elementor-widget elementor-widget-heading\" data-id=\"e7e6d30\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">1. <code>@starting-style<\/code>: animar lo que acaba de aparecer<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2a1e2cd elementor-widget elementor-widget-heading\" data-id=\"2a1e2cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">C\u00f3mo se hac\u00eda antes.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a3050a9 elementor-widget elementor-widget-text-editor\" data-id=\"a3050a9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Para animar un elemento que acababa de aparecer ten\u00edamos que usar JavaScript: a\u00f1adir el elemento al DOM, esperar un instante (con <code>requestAnimationFrame<\/code> o un <code>setTimeout<\/code>) y reci\u00e9n ah\u00ed agregar una clase que disparara la transici\u00f3n. Funcionaba, pero es c\u00f3digo fr\u00e1gil para algo que es puramente visual.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-687a255 elementor-widget elementor-widget-heading\" data-id=\"687a255\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">El problema que resuelve <code>@starting-style<\/code>.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-05535e7 elementor-widget elementor-widget-text-editor\" data-id=\"05535e7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<blockquote style=\"border-left:4px solid #94a3b8;margin:16px 0;padding:6px 18px\"><p><em>Analog\u00eda:<\/em><\/p><p><em>Podr\u00edamos imaginar una transici\u00f3n como una libreta de dibujos donde pasas las hojas r\u00e1pido: para que haya movimiento necesitas dos dibujos, el de <strong>antes<\/strong> y el de <strong>despu\u00e9s<\/strong>. Un elemento que acaba de aparecer solo tiene el dibujo de despu\u00e9s; le falta la primera hoja.<\/em><\/p><\/blockquote><p>Una transici\u00f3n necesita un <strong>estado anterior<\/strong> desde el cual animar. Cuando un elemento ya estaba en la p\u00e1gina, el navegador lo tiene. Pero cuando pasa de <code>display: none<\/code> a visible, como nuestro popover, el navegador no tiene ese \u00abantes\u00bb y simplemente muestra el resultado final.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee0dbe1 elementor-widget elementor-widget-heading\" data-id=\"ee0dbe1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Problema.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a96a070 elementor-widget elementor-widget-text-editor\" data-id=\"a96a070\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Tenemos un popover con una transici\u00f3n de <code>opacity<\/code> y <code>transform<\/code> de <code>.3s<\/code>. Al abrirlo, \u00bfse animar\u00e1 su entrada?<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c40f90d elementor-widget elementor-widget-html\" data-id=\"c40f90d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class=\"wp-block-code language-css\"><code class=\"language-css\">\/* estilos.css *\/\n.palette{\n\topacity: 0;\n\ttransform: translate(-12px) scale(.8);\n\ttransition-property: opacity, transform;\n\ttransition-duration: .3s;\n}\n\n.palette:popover-open{\n\topacity: 1;\n\ttransform: unset;\n}<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d34228 elementor-widget elementor-widget-heading\" data-id=\"9d34228\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Respuesta:<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4967ea6 elementor-widget elementor-widget-text-editor\" data-id=\"4967ea6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Lamentablemente no. Si te das cuenta en mi navegador, la paleta aparece de golpe, aunque la transici\u00f3n est\u00e9 bien escrita. Esto es porque al abrirse, el elemento <strong>no ten\u00eda un estado anterior<\/strong> desde el cual animar.<\/p><p>Para eso existe <code>@starting-style<\/code>, una regla donde definimos <strong>c\u00f3mo se ve el elemento justo en el primer momento en que aparece<\/strong>. Con eso el navegador ya tiene la primera hoja de la libreta.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fb066a4 elementor-widget elementor-widget-html\" data-id=\"fb066a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class=\"wp-block-code language-css\"><code class=\"language-css\">\/* estilos.css *\/\n.palette:popover-open{\n\topacity: 1;\n\ttransform: unset;\n}\n\n@starting-style{\n\t.palette:popover-open{\n\t\topacity: 0;\n\t\ttransform: translate(-12px) scale(.8);\n\t}\n}<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e3437f elementor-widget elementor-widget-text-editor\" data-id=\"6e3437f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ahora s\u00ed nos damos cuenta de que la paleta <strong>entra<\/strong> desliz\u00e1ndose y creciendo. Pero si la cerramos, desaparece de golpe otra vez. De eso se encarga la siguiente caracter\u00edstica.<\/p><p><strong>Consideraciones:<\/strong><\/p><ul><li><code>@starting-style<\/code> solo afecta al <strong>primer momento<\/strong> en que el elemento se muestra; despu\u00e9s el elemento usa sus estilos normales.<\/li><li>Los valores que pongas ah\u00ed deben ser propiedades que tengan una <code>transition<\/code>, de lo contrario no habr\u00e1 nada que animar.<\/li><li>Tambi\u00e9n funciona con <code>&lt;dialog&gt;<\/code> y con elementos que se a\u00f1aden al DOM con JavaScript.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-10a4902 elementor-widget elementor-widget-heading\" data-id=\"10a4902\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">En tu d\u00eda a d\u00eda.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-00c5306 elementor-widget elementor-widget-text-editor\" data-id=\"00c5306\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00dasala cada vez que algo <strong>aparezca<\/strong> en pantalla y quieras que lo haga con suavidad:<\/p><ul><li>Notificaciones o <em>toasts<\/em> que se insertan con JavaScript.<\/li><li>Modales con <code>&lt;dialog&gt;<\/code> y men\u00fas desplegables.<\/li><li>Tarjetas que se a\u00f1aden a una lista.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14d3780 elementor-widget elementor-widget-heading\" data-id=\"14d3780\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">2. <code>transition-behavior<\/code>: animar la salida<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d77dbaf elementor-widget elementor-widget-heading\" data-id=\"d77dbaf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">C\u00f3mo se hac\u00eda antes.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ed88ee elementor-widget elementor-widget-text-editor\" data-id=\"2ed88ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Para animar la salida ten\u00edamos dos opciones: combinar <code>opacity<\/code> con <code>visibility<\/code> (y dejar el elemento ocupando espacio), o escuchar el evento <code>transitionend<\/code> con JavaScript para poner <code>display: none<\/code> cuando la animaci\u00f3n terminaba.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ae04dfa elementor-widget elementor-widget-heading\" data-id=\"ae04dfa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">El problema que resuelve <code>transition-behavior<\/code>.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-77cb624 elementor-widget elementor-widget-text-editor\" data-id=\"77cb624\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<blockquote style=\"border-left:4px solid #94a3b8;margin:16px 0;padding:6px 18px\"><p><em>Analog\u00eda:<\/em><\/p><p><em>Podr\u00edamos imaginar <code>opacity<\/code> como un <strong>regulador de luz<\/strong> (puede estar en 0, en 0.5, en 1) y <code>display<\/code> como un <strong>interruptor<\/strong> (solo est\u00e1 encendido o apagado, sin puntos intermedios). Al cerrar, el interruptor se apaga al instante y nunca llegamos a ver c\u00f3mo baja la luz.<\/em><\/p><\/blockquote><p>Cuando cerramos el popover, el navegador aplica <code>display: none<\/code> <strong>inmediatamente<\/strong>. El elemento desaparece antes de que <code>opacity<\/code> y <code>transform<\/code> tengan tiempo de animarse. Esto pasa porque <code>display<\/code> es una propiedad <strong>discreta<\/strong>: sus valores (<code>none<\/code>, <code>block<\/code>) no tienen valores intermedios, y por defecto las transiciones ignoran a las propiedades discretas.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e7a0243 elementor-widget elementor-widget-heading\" data-id=\"e7a0243\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Problema.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-87b59d3 elementor-widget elementor-widget-text-editor\" data-id=\"87b59d3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ya tenemos la transici\u00f3n en <code>opacity<\/code> y <code>transform<\/code>, \u00bfpor qu\u00e9 la salida sigue sin animarse?<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-801a0b5 elementor-widget elementor-widget-heading\" data-id=\"801a0b5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Respuesta:<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f4354c elementor-widget elementor-widget-text-editor\" data-id=\"5f4354c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Porque <code>display<\/code> <strong>no forma parte de la transici\u00f3n<\/strong>. Debemos hacer dos cosas: agregar <code>display<\/code> a <code>transition-property<\/code>, y activar <code>transition-behavior: allow-discrete<\/code>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7539067 elementor-widget elementor-widget-html\" data-id=\"7539067\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class=\"wp-block-code language-css\"><code class=\"language-css\">\/* estilos.css *\/\n.palette{\n\topacity: 0;\n\ttransform: translate(-12px) scale(.8);\n\ttransition-property: opacity, transform, display;\n\ttransition-duration: .3s;\n\ttransition-behavior: allow-discrete;\n}<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a971dd5 elementor-widget elementor-widget-text-editor\" data-id=\"a971dd5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Con <code>allow-discrete<\/code> le decimos al navegador que <strong>espere<\/strong> a que terminen las dem\u00e1s transiciones antes de cambiar el valor discreto: al abrir, <code>display<\/code> cambia al inicio (para que se vea la animaci\u00f3n), y al cerrar, cambia al final (cuando ya termin\u00f3 de desvanecerse).<\/p><blockquote style=\"border-left:4px solid #94a3b8;margin:16px 0;padding:6px 18px\"><p><strong>En pocas palabras:<\/strong> <code>allow-discrete<\/code> hace que el interruptor espere a que el regulador de luz termine de bajar.<\/p><\/blockquote><p>\u00a1Y listo! Nuestra paleta ya entra y sale con animaci\u00f3n, sin JavaScript.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-79425e7 elementor-widget elementor-widget-heading\" data-id=\"79425e7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><code>normal<\/code> vs <code>allow-discrete<\/code><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-24c3cd6 elementor-widget elementor-widget-text-editor\" data-id=\"24c3cd6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><code>transition-behavior<\/code> solo tiene dos valores y la diferencia pr\u00e1ctica es esta:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35a8658 elementor-widget elementor-widget-html\" data-id=\"35a8658\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div style=\"overflow-x:auto\"><table style=\"border-collapse:collapse;width:100%\"><thead><tr><th style=\"text-align:left;padding:10px;border-bottom:2px solid #cbd5e1\">Valor<\/th><th style=\"text-align:left;padding:10px;border-bottom:2px solid #cbd5e1\">Qu\u00e9 hace<\/th><th style=\"text-align:left;padding:10px;border-bottom:2px solid #cbd5e1\">Cu\u00e1ndo usarlo<\/th><\/tr><\/thead><tbody><tr><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\"><code>normal<\/code><\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\">Ignora las propiedades discretas como <code>display<\/code>. Es el valor por defecto.<\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\">Transiciones comunes (<code>opacity<\/code>, <code>transform<\/code>, <code>color<\/code>).<\/td><\/tr><tr><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\"><code>allow-discrete<\/code><\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\">Permite transicionar propiedades discretas, cambiando su valor al inicio o al final.<\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\">Mostrar y ocultar elementos con <code>display<\/code> (popovers, modales, men\u00fas).<\/td><\/tr><\/tbody><\/table><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0427bad elementor-widget elementor-widget-heading\" data-id=\"0427bad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Shorthand <code>transition<\/code>.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1491319 elementor-widget elementor-widget-text-editor\" data-id=\"1491319\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Si prefieres escribirlo en una sola l\u00ednea, <code>allow-discrete<\/code> va dentro del shorthand, al final de cada propiedad que lo necesite:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a87f5ea elementor-widget elementor-widget-html\" data-id=\"a87f5ea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class=\"wp-block-code language-css\"><code class=\"language-css\">\/* estilos.css *\/\n.palette{\n\ttransition: opacity .3s, transform .3s, display .3s allow-discrete;\n}<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6797dc8 elementor-widget elementor-widget-text-editor\" data-id=\"6797dc8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Consideraciones:<\/strong><\/p><ul><li>Si te falta <code>display<\/code> en <code>transition-property<\/code>, <code>allow-discrete<\/code> no tiene efecto: el <code>display<\/code> tiene que estar en la lista.<\/li><li>Si en la salida el popover pierde su posici\u00f3n sobre los dem\u00e1s elementos, agrega tambi\u00e9n <code>overlay<\/code> a <code>transition-property<\/code> (es otra propiedad discreta).<\/li><li>El <code>::backdrop<\/code> de nuestro ejemplo no se anima: aparece y desaparece al instante. Si quieres animarlo necesita su propia <code>transition<\/code> y su propio <code>@starting-style<\/code>.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db4facf elementor-widget elementor-widget-heading\" data-id=\"db4facf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">En tu d\u00eda a d\u00eda.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-22d416e elementor-widget elementor-widget-text-editor\" data-id=\"22d416e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00dasala cada vez que algo <strong>desaparezca<\/strong> con <code>display: none<\/code> y quieras que se vaya con suavidad:<\/p><ul><li>Men\u00fas m\u00f3viles y paneles que se abren y se cierran.<\/li><li>Modales con <code>&lt;dialog&gt;<\/code> y popovers.<\/li><li>Cualquier elemento que ocultes con <code>display: none<\/code> desde una clase.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1917874 elementor-widget elementor-widget-heading\" data-id=\"1917874\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">3. <code>nesting<\/code>: escribir CSS dentro de CSS<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d517f0c elementor-widget elementor-widget-heading\" data-id=\"d517f0c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">C\u00f3mo se hac\u00eda antes.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-22ce77f elementor-widget elementor-widget-text-editor\" data-id=\"22ce77f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Anidar selectores era una de las razones principales para instalar <code>Sass<\/code> o <code>Less<\/code>: necesit\u00e1bamos un paso de compilaci\u00f3n solo para no repetir el nombre de la clase en cada regla.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ec4fed0 elementor-widget elementor-widget-heading\" data-id=\"ec4fed0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">El problema que resuelve el <code>nesting<\/code>.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c083b4 elementor-widget elementor-widget-text-editor\" data-id=\"2c083b4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<blockquote style=\"border-left:4px solid #94a3b8;margin:16px 0;padding:6px 18px\"><p><em>Analog\u00eda:<\/em><\/p><p><em>Podr\u00edamos imaginar la direcci\u00f3n de una casa: en lugar de decir \u00abCalle Principal, casa 5, cocina\u00bb y \u00abCalle Principal, casa 5, sala\u00bb, <strong>entramos a la casa<\/strong> y ah\u00ed decimos solo \u00abcocina\u00bb y \u00absala\u00bb.<\/em><\/p><\/blockquote><p>F\u00edjate en c\u00f3mo qued\u00f3 nuestro CSS hasta ahora. Escribimos <code>.palette<\/code> en <strong>cada regla<\/strong>, y el <code>@starting-style<\/code> qued\u00f3 separado de <code>.palette:popover-open<\/code>, aunque va dedicado a \u00e9l:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf194ce elementor-widget elementor-widget-html\" data-id=\"bf194ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class=\"wp-block-code language-css\"><code class=\"language-css\">\/* estilos.css *\/\n.palette{\n\topacity: 0;\n\ttransform: translate(-12px) scale(.8);\n\ttransition-property: opacity, transform, display;\n\ttransition-duration: .3s;\n\ttransition-behavior: allow-discrete;\n}\n\n.palette::backdrop{\n\tbackground-color: rgba(8, 8, 8, 0.288);\n\tfilter: blur(12px);\n}\n\n.palette:popover-open{\n\topacity: 1;\n\ttransform: unset;\n}\n\n@starting-style{\n\t.palette:popover-open{\n\t\topacity: 0;\n\t\ttransform: translate(-12px) scale(.8);\n\t}\n}<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6fad447 elementor-widget elementor-widget-text-editor\" data-id=\"6fad447\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Con el <strong>nesting<\/strong> podemos escribir las reglas hijas <strong>dentro<\/strong> de la regla padre, y el navegador se encarga de unirlas. Esto lo hac\u00eda antes <code>Sass<\/code>, pero ahora CSS lo hace de forma nativa, sin compilar nada.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b27d54 elementor-widget elementor-widget-heading\" data-id=\"1b27d54\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Error deliberado: olvidar el <code>&amp;<\/code>.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71ce1b3 elementor-widget elementor-widget-text-editor\" data-id=\"71ce1b3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Empecemos anidando <code>:popover-open<\/code> dentro de <code>.palette<\/code>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b62a422 elementor-widget elementor-widget-html\" data-id=\"b62a422\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class=\"wp-block-code language-css\"><code class=\"language-css\">\/* estilos.css *\/\n.palette{\n\topacity: 0;\n\ttransform: translate(-12px) scale(.8);\n\ttransition-property: opacity, transform, display;\n\ttransition-duration: .3s;\n\ttransition-behavior: allow-discrete;\n\n\t:popover-open{\n\t\topacity: 1;\n\t\ttransform: unset;\n\t}\n}<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-223c2c7 elementor-widget elementor-widget-text-editor\" data-id=\"223c2c7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Lamentablemente la paleta se abre, pero <strong>no la vemos<\/strong>. Esto es porque, sin el s\u00edmbolo <code>&amp;<\/code>, el navegador interpreta <code>:popover-open<\/code> como <strong>un descendiente<\/strong> de <code>.palette<\/code> (<code>.palette :popover-open<\/code>), no como la propia <code>.palette<\/code>. Para que se aplique al mismo elemento debemos poner <code>&amp;<\/code> delante.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-140921c elementor-widget elementor-widget-heading\" data-id=\"140921c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">El s\u00edmbolo <code>&amp;<\/code>.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b96f2f8 elementor-widget elementor-widget-text-editor\" data-id=\"b96f2f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>El <code>&amp;<\/code> representa <strong>al selector padre<\/strong>. Es necesario con pseudoclases (<code>&amp;:popover-open<\/code>, <code>&amp;:hover<\/code>) y pseudoelementos (<code>&amp;::backdrop<\/code>), y para unir clases al mismo elemento (<code>&amp;.activo<\/code>).<\/p><p>Y ahora s\u00ed, este es el c\u00f3digo completo, con las 3 caracter\u00edsticas juntas:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ff76dd elementor-widget elementor-widget-html\" data-id=\"8ff76dd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class=\"wp-block-code language-css\"><code class=\"language-css\">\/* estilos.css *\/\n.palette{\n\topacity: 0;\n\ttransform: translate(-12px) scale(.8);\n\ttransition-property: opacity, transform, display;\n\ttransition-duration: .3s;\n\ttransition-behavior: allow-discrete;\n\n\t&amp;::backdrop{\n\t\tbackground-color: rgba(8, 8, 8, 0.288);\n\t\tfilter: blur(12px);\n\t}\n\n\t&amp;:popover-open{\n\t\topacity: 1;\n\t\ttransform: unset;\n\n\t\t@starting-style{\n\t\t\topacity: 0;\n\t\t\ttransform: translate(-12px) scale(.8);\n\t\t}\n\t}\n}<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34d39be elementor-widget elementor-widget-text-editor\" data-id=\"34d39be\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Quiero que veas que el <code>@starting-style<\/code> ahora est\u00e1 <strong>dentro<\/strong> de <code>&amp;:popover-open<\/code>: ya no repetimos el selector, y todo lo de <code>.palette<\/code> vive en un solo bloque. Cada regla anidada es la misma que ten\u00edamos arriba, pero mucho m\u00e1s ordenada.<\/p><div style=\"background:#faf5ff;padding:14px 18px;border-radius:8px;margin:16px 0\">\ud83e\udde0 Tambi\u00e9n podemos anidar <code>@media<\/code>, <code>@container<\/code> y <code>@supports<\/code> dentro de una regla, para tener cada estilo junto a su responsive.<\/div><p><strong>Consideraciones:<\/strong><\/p><ul><li>Evita anidar demasiado: 2 o 3 niveles suelen ser suficientes para que el c\u00f3digo siga siendo legible.<\/li><li>Al anidar <code>.hijo<\/code> o <code>a<\/code> como descendientes, el <code>&amp;<\/code> no es obligatorio; con pseudoclases y pseudoelementos s\u00ed.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a4d2cef elementor-widget elementor-widget-heading\" data-id=\"a4d2cef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">En tu d\u00eda a d\u00eda.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7dec0b8 elementor-widget elementor-widget-text-editor\" data-id=\"7dec0b8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>El <code>nesting<\/code> no es solo para popovers: lo puedes aplicar a <strong>cualquier componente<\/strong> que ya tengas. Por ejemplo, en una tarjeta, sus t\u00edtulos, su hover y su responsive viven en un solo bloque:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6102ce0 elementor-widget elementor-widget-html\" data-id=\"6102ce0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class=\"wp-block-code language-css\"><code class=\"language-css\">\/* estilos.css *\/\n.tarjeta{\n\tpadding: 1rem;\n\tborder-radius: 12px;\n\n\th2{\n\t\tfont-size: 1.25rem;\n\t}\n\n\t&amp;:hover{\n\t\tbox-shadow: 0 8px 24px rgb(0 0 0 \/ .2);\n\t}\n\n\t@media (width &lt; 600px){\n\t\tpadding: .75rem;\n\t}\n}<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-96cfa71 elementor-widget elementor-widget-heading\" data-id=\"96cfa71\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Resumen de las 3 caracter\u00edsticas<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-993de71 elementor-widget elementor-widget-html\" data-id=\"993de71\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div style=\"overflow-x:auto\"><table style=\"border-collapse:collapse;width:100%\"><thead><tr><th style=\"text-align:left;padding:10px;border-bottom:2px solid #cbd5e1\">Caracter\u00edstica<\/th><th style=\"text-align:left;padding:10px;border-bottom:2px solid #cbd5e1\">Antes<\/th><th style=\"text-align:left;padding:10px;border-bottom:2px solid #cbd5e1\">Hoy<\/th><th style=\"text-align:left;padding:10px;border-bottom:2px solid #cbd5e1\">\u00dasala en<\/th><\/tr><\/thead><tbody><tr><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\"><code>@starting-style<\/code><\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\">JavaScript para a\u00f1adir una clase despu\u00e9s de que aparece el elemento<\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\"><code>@starting-style{ ... }<\/code> con el estilo inicial<\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\">Notificaciones, modales, men\u00fas, elementos a\u00f1adidos con JavaScript<\/td><\/tr><tr><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\"><code>transition-behavior<\/code><\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\"><code>visibility<\/code> o <code>transitionend<\/code> con JavaScript<\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\"><code>transition-behavior: allow-discrete;<\/code> y <code>display<\/code> en <code>transition-property<\/code><\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\">Men\u00fas m\u00f3viles, paneles, <code>&lt;dialog&gt;<\/code>, popovers<\/td><\/tr><tr><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\"><code>nesting<\/code><\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\"><code>Sass<\/code> o <code>Less<\/code> con compilaci\u00f3n<\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\">Reglas hijas dentro del padre, con <code>&amp;<\/code> cuando haga falta<\/td><td style=\"padding:10px;border-bottom:1px solid #e2e8f0;vertical-align:top\">Cualquier componente de tu proyecto<\/td><\/tr><\/tbody><\/table><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-98f6dab elementor-widget elementor-widget-text-editor\" data-id=\"98f6dab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<blockquote style=\"border-left:4px solid #94a3b8;margin:16px 0;padding:6px 18px\"><p>En pocas palabras: <code>@starting-style<\/code> anima la entrada, <code>transition-behavior<\/code> anima la salida y el <code>nesting<\/code> mantiene todo el c\u00f3digo ordenado.<\/p><\/blockquote><p>\u00a1Felicidades! Has creado una paleta de comandos que entra y sale con animaci\u00f3n, <strong>sin JavaScript<\/strong>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d7f149 elementor-widget elementor-widget-heading\" data-id=\"3d7f149\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Por d\u00f3nde empezar.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-967681a elementor-widget elementor-widget-text-editor\" data-id=\"967681a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Para m\u00ed la que m\u00e1s r\u00e1pido se nota en el d\u00eda a d\u00eda es el <code>nesting<\/code>, porque la puedes aplicar hoy mismo a un archivo CSS que ya tengas. Las otras dos aparecen en cuanto tengas un elemento que entra y sale de la pantalla.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6d3a2a elementor-widget elementor-widget-heading\" data-id=\"e6d3a2a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Ejercicios para empezar hoy:<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3bbacb9 elementor-widget elementor-widget-text-editor\" data-id=\"3bbacb9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>Toma el CSS de un componente tuyo y anida sus reglas con <code>&amp;<\/code>.<\/li><li>Agrega <code>@starting-style<\/code> a un elemento que se muestre con JavaScript.<\/li><li>Anima la salida de un <code>&lt;dialog&gt;<\/code> o de un popover con <code>allow-discrete<\/code>.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6074c17 elementor-widget elementor-widget-heading\" data-id=\"6074c17\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Descarga el c\u00f3digo y mira el video<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-070d89c elementor-widget elementor-widget-text-editor\" data-id=\"070d89c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00bfQuieres ver las 3 caracter\u00edsticas en vivo, con el c\u00f3digo funcionando en el navegador? Mira el video completo <strong>\u00ab3 caracter\u00edsticas que no conoc\u00edas de CSS\u00bb<\/strong> en mi canal de YouTube.<\/p>\n<p>Y si prefieres probarlo directamente, descarga el c\u00f3digo completo del buscador desde GitHub para pegarlo en tu proyecto.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0ef4fb1 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"0ef4fb1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/youtu.be\/vTFeJyYmZHQ\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Ver el video en YouTube<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a028d5 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"1a028d5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-lg\" href=\"https:\/\/github.com\/AlexCGDesign\/3-propiedades-menu-buscador\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Descargar el c\u00f3digo en GitHub<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcbb Descarga el c\u00f3digo del proyectoEl buscador con popover completo (HTML y CSS) listo para abrir y probar.Descargar el c\u00f3digo en GitHub \u2192 Es hora de cambiar como se escribe CSS. CSS ha cambiado bastante en estos a\u00f1os, es algo que me alegra muchisimo. Cosas que antes necesitaban JavaScript, trucos con visibility o un preprocesador [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3337,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acg_migrated":"","footnotes":""},"categories":[2],"tags":[],"class_list":["post-3309","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/3309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=3309"}],"version-history":[{"count":26,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/3309\/revisions"}],"predecessor-version":[{"id":3336,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/3309\/revisions\/3336"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media\/3337"}],"wp:attachment":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=3309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=3309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=3309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}