{"id":21621,"date":"2025-01-02T13:32:55","date_gmt":"2025-01-02T12:32:55","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=21621"},"modified":"2025-07-18T11:19:56","modified_gmt":"2025-07-18T09:19:56","slug":"novedades-css-2025","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/novedades-css-2025\/","title":{"rendered":"Novedades CSS 2025"},"content":{"rendered":"\n<p>Nos encontramos en la casilla de salida de este 2025 y no podemos faltar a nuestra cita con las novedades CSS para este a\u00f1o. Como ya es costumbre en Caronte, repasamos las <strong>propiedades que van a revolucionar el dise\u00f1o web durante este a\u00f1o<\/strong>. Si bien es cierto, que algunas de las mencionadas en nuestros art\u00edculos de CSS en 2024 y <a href=\"https:\/\/carontestudio.com\/blog\/tendencias-de-uso-de-css-en-2019\/\">tendencias CSS en 2019<\/a>, entre otros, se han diluido en el tiempo, otras llegaron para quedarse. Por eso creemos que las que te vamos a presentar este a\u00f1o llegan para quedarse. As\u00ed que sin m\u00e1s dilaci\u00f3n, vamos a dar comienzo a nuestra recopilaci\u00f3n de nuevas propiedades CSS para 2025, que sin duda, te dejar\u00e1n sin habla.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Novedades de usabilidad CSS para 2025<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">View()<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Aunque en ya hemos hablado de esta propiedad <a href=\"https:\/\/carontestudio.com\/blog\/novedades-css-2024\/\">en art\u00edculos anteriores<\/a>, ser\u00e1 a lo largo de este presente 2025 cuando realmente explotemos las posibilidades que nos brinda \u00abscroll into view\u00bb. Este genial recurso nos permite crear transiciones en funci\u00f3n de si un elemento \u00abest\u00e1 en pantalla\u00bb, <strong>como lo hiciera hasta ahora mediante \u00abaos.js\u00bb.<\/strong><\/p>\n\n\n\n<p>El funcionamiento es muy sencillo, tan solo debemos crear una animaci\u00f3n mediante la propiedad \u00abanimation\u00bb, y definir \u00abanimation-timeline\u00bb de la siguiente manera. Esto nos permitir\u00e1 que la animaci\u00f3n dependa de la visibilidad del elemento en cuesti\u00f3n.<\/p>\n\n\n\n<p>Como podr\u00e1s observar en el siguiente c\u00f3digo, podemos definir par\u00e1metros adicionales como cu\u00e1ndo comienza y cu\u00e1ndo acaba la animaci\u00f3n. En este caso, la transici\u00f3n comienza en cuanto el elemento se muestra en pantalla y acaba cuando llega al 30% de la altura de esta. Resulta muy intuitivo poder definir dicho comportamiento.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"617\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/scroll-into-view.jpg\" alt=\"Novedades CSS 2025; view()\" class=\"wp-image-21643\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/scroll-into-view.jpg 900w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/scroll-into-view-300x206.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/scroll-into-view-768x527.jpg 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>.elemento {\n    animation-timeline: view();\n    animation-range-start: cover;\n    animation-range-end: 30vh;\n\n}<\/code><\/pre>\n\n\n\n<p>Tambi\u00e9n es posible indicar estos par\u00e1metros dentro de \u00abview()\u00bb:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.elemento {\n    animation-timeline: view(100px 200px);\n\n}<\/code><\/pre>\n\n\n\n<p>Lamentablemente, pese a contar con casi m\u00e1s de medio a\u00f1o entre nosotros, <strong>sigue sin contar con soporte para navegadores como Firefox o Safari.<\/strong> Esperemos que a lo largo de 2025 subsanen el error.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Auto Height<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"564\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/auto-height.jpg\" alt=\"Novedades CSS 2025; Auto height\" class=\"wp-image-21668\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/auto-height.jpg 900w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/auto-height-300x188.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/auto-height-768x481.jpg 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Si hay una propiedad que ansi\u00e1bamos sobre cualquier otra, seguramente se trate de \u00abauto-height\u00bb. Si te ha tocado lidiar con transiciones de altura como en elementos colapsables, men\u00fas y otros, sin duda alguna te habr\u00e1s topado con el desagradable \u00absalto\u00bb de altura entre distintos estados.<\/p>\n\n\n\n<p>En este caso, se trata de la actualizaci\u00f3n de la propiedad \u00abtransition\u00bb sobre la altura de un elemento. En el siguiente c\u00f3digo podr\u00e1s observar la pr\u00e1ctica m\u00e1s habitual hasta ahora, con una simple variaci\u00f3n de altura del elemento de clase \u00abcolapsable\u00bb cuando se le agrega la clase \u00ababierto\u00bb. <\/p>\n<\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>.colapsable {\n  height: 0;\n  transition: height 0.5s ease;\n\n  &amp;.abierto {\n    height: 300px;\n  }\n}<\/code><\/pre>\n\n\n\n<p>Este c\u00f3digo resulta en un <strong>cambio brusco de la altura de este<\/strong>. Hasta ahora, pod\u00edamos lograr una suave transici\u00f3n recurriendo a JS. Sin embargo, ahora podemos prescindir de scripts y de manera nativa en CSS, indicar al elemento que se comporte de la misma manera.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.colapsable {\n  height: 0;\n  transition: height 0.5s ease;\n\n  &amp;.abierto {\n    height: calc-size(auto);\n  }\n}<\/code><\/pre>\n\n\n\n<p>De nuevo, para los usuarios de Safari, Firefox y Edge, habr\u00e1 que esperar para recibir soporte. Por el momento, solo es compatible con Google Chrome.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Anchor Positioning<\/h3>\n\n\n\n<p>Quiz\u00e1 la m\u00e1s innovadora propiedad CSS para 2025 sea el posicionamiento por anclas. Cuando hablamos de anclas en HTML y CSS tendemos a pensar en enlazado, pero esta propiedad va mucho m\u00e1s all\u00e1. Se trata de un recurso de posicionamiento y visualizaci\u00f3n de elementos muy innovador. De manera similar a los \u00abpopovers\u00bb, el posicionamiento mediante anclas, <strong>permite mostrar elementos en funci\u00f3n de otros.<\/strong><\/p>\n\n\n\n<p>Su funcionamiento radica en definir la relaci\u00f3n de un \u00abelemento ancla\u00bb con otro u otros elementos \u00abobjetivo\u00bb. Para ello, comenzaremos con indicar al \u00abelemento ancla\u00bb la propiedad \u00abanchor-name\u00bb, y al \u00abelemento objetivo\u00bb la propiedad \u00abposition-anchor\u00bb. Estos poseen una nomenclatura similar a las variables CSS. He aqu\u00ed un ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.ancla{\n   anchor-name: --mi-elemento-ancla;\n}\n.objetivo{\n  position: absolute;\n  position-anchor: --mi-elemento-ancla;\n}<\/code><\/pre>\n\n\n\n<p>Una vez definidos, podemos posicionar los distintos elementos mediante la propiedad \u00abposition-area\u00bb, habitualmente indicado con dos valores de posici\u00f3n como, por ejemplo, \u00abtop start\u00bb o \u00abbottom end\u00bb, etc.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n.objetivo{\n  position: absolute;\n  position-anchor: --mi-elemento-ancla;\n  position-area: self-start self-end;\n}<\/code><\/pre>\n\n\n\n<p>Ahora, es cuando realmente sacaremos partido a esta herramienta, ya que podemos definir la visibilidad del\u00bbelemento objetivo\u00bb con relaci\u00f3n al \u00abelemento ancla\u00bb.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n.objetivo{\n  position: absolute;\n  position-anchor: --mi-elemento-ancla;\n  position-area: self-start self-end;\n}\n<\/code><\/pre>\n\n\n\n<p>Esta propiedad promete ser una alternativa inteligente y muy \u00fatil a los actuales tooltips, pero de momento no cuentan con soporte para la gran mayor\u00eda de navegadores, siendo \u00fanicamente en Google Chrome y Microsoft Edge donde los podemos emplear actualmente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Novedades de texto CSS para 2025<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">field-sizing<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>En ocasiones los formularios con campos extensos como \u00e1reas de texto, pensados para incorporar contenido indefinido, cuentan con un tama\u00f1o excesivo. En principio, puede parecer l\u00f3gico, pero no es m\u00e1s que \u00abun parche\u00bb. Esto <strong>consiste en dar una altura aproximada a un campo de texto, jugando a adivinar la longitud m\u00e1s probable de un mensaje o texto por parte del usuario.<\/strong><\/p>\n\n\n\n<p>Con la siguiente propiedad, por primera vez en CSS, podremos ajustar el tama\u00f1o del campo al contenido. Mediante \u00abfield-sizing\u00bb, podemos despedirnos de los formularios con grandes campos de texto, generalmente vac\u00edos. As\u00ed, podemos crear dise\u00f1os m\u00e1s minimalistas y comedidos, sin renunciar a la usabilidad que estos requieren. <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"530\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/formulario.jpg\" alt=\"Novedades CSS 2025; Field-sizing\" class=\"wp-image-21670\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/formulario.jpg 900w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/formulario-300x177.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/formulario-768x452.jpg 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Aplicando la propiedad \u00abfield-sizing\u00bb a campos input con el valor \u00abcontent\u00bb, lograremos que el tama\u00f1o se adapte al contenido de este.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>textarea {\n  field-sizing: content;\n}<\/code><\/pre>\n\n\n\n<p>Cabe destacar que, por el momento, \u00fanicamente cuenta con soporte para Google Chrome, pero se prev\u00e9 su compatibilidad en el resto de los principales navegadores a lo largo de 2025.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Font-size-adjust<\/h3>\n\n\n\n<p>El uso de distintas familias tipogr\u00e1ficas en dise\u00f1o web es indispensable y en ocasiones puede derivar en un aut\u00e9ntico dolor de cabeza. Quiz\u00e1s, uno de los problemas m\u00e1s molestos en lo que al uso de distintas tipograf\u00edas web se refiere es al cambio de la \u00abaltura x\u00bb, relativa a las letras min\u00fasculas de cada tipograf\u00eda. As\u00ed, la altura de una \u00abArial\u00bb, es distinta a la de una \u00abTimes\u00bb. Y es precisamente cuando se lleva a cabo el cambio de una a otra, cuando se puede llegar a apreciar un desplazamiento del DOM debido a esta diferencia en el texto.<\/p>\n\n\n\n<p>Para solventar este problema nace la propiedad \u00abfont-size-adjust\u00bb. Este puede actuar como un multiplicador del tama\u00f1o base de la tipograf\u00eda del elemento para que pueda ajustarse cuando sea necesario. He aqu\u00ed un ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h2{\n  font-size: 2rem;\n  font-size-adjust: 0.5;\n}<\/code><\/pre>\n\n\n\n<p>Como podr\u00e1s observar, el elemento \u00abH2\u00bb cuenta con un tama\u00f1o de 2rem y mediante la propiedad \u00abfont-size-adjust\u00bb podemos multiplicar este tama\u00f1o para, por ejemplo, ajustarlo hasta 1rem. Adem\u00e1s de un valor num\u00e9rico, podemos indicarle dos, o incluso valores globales; inherit, initial, revert, revert-layer, unset, ex-width, ic-height, from-font, cap-height, etc.<\/p>\n\n\n\n<p>La buena noticia es que cuenta con soporte para todos los principales navegadores.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n\n\n<p>\u00bfQu\u00e9 te han parecido las novedades de CSS para 2025? \u00bfTe parecen suficientes o esperabas m\u00e1s? No desesperes, porque <a href=\"https:\/\/carontestudio.com\/blog\/novedades-css-2025-parte-2\/\">ya puedes echar un vistazo a la segunda parte de nuestra selecci\u00f3n de novedades CSS para 2025<\/a>.<\/p>\n\n\n\n<p>En cualquier caso, te recordamos que compruebes en \u00ab<a href=\"https:\/\/caniuse.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Can I use<\/a>\u00bb la compatibilidad con los principales navegadores de las distintas propiedades aqu\u00ed expuestas. <strong>Siempre est\u00e1n sujetas a actualizaciones e incluso a su propia obsolescencia, as\u00ed que ten cuidado.<\/strong><\/p>\n\n\n\n<p>Esperamos que hayas disfrutado de nuestro art\u00edculo. \u00a1Hasta pronto!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nos encontramos en la casilla de salida de este 2025 y no podemos faltar a nuestra cita con las novedades CSS para este a\u00f1o. Como ya es costumbre en Caronte, repasamos las propiedades que van a revolucionar el dise\u00f1o web durante este a\u00f1o. Si bien es cierto, que algunas de las mencionadas en nuestros art\u00edculos [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":21673,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[94,1,50],"tags":[],"class_list":["post-21621","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-noticias","category-programacion-web"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Novedades CSS 2025 - Blog de maketing | Caronte<\/title>\n<meta name=\"description\" content=\"Ya est\u00e1n aqu\u00ed las principales novedades CSS 2025 para revolucionar el dise\u00f1o web y adaptarlo a las nuevas necesidades y tecnolog\u00edas. \u00a1Vamos!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/novedades-css-2025\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Novedades CSS 2025 - Blog de maketing | Caronte\" \/>\n<meta property=\"og:description\" content=\"Ya est\u00e1n aqu\u00ed las principales novedades CSS 2025 para revolucionar el dise\u00f1o web y adaptarlo a las nuevas necesidades y tecnolog\u00edas. \u00a1Vamos!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/novedades-css-2025\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de maketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-02T12:32:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-18T09:19:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/novedades-css-2025.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"David de Lamo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"David de Lamo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/novedades-css-2025\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/novedades-css-2025\\\/\"},\"author\":{\"name\":\"David de Lamo\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/2104191b75663e9e9ca47f821c5f92cf\"},\"headline\":\"Novedades CSS 2025\",\"datePublished\":\"2025-01-02T12:32:55+00:00\",\"dateModified\":\"2025-07-18T09:19:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/novedades-css-2025\\\/\"},\"wordCount\":1183,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/novedades-css-2025\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/novedades-css-2025.jpg\",\"articleSection\":[\"Dise\u00f1o web\",\"Noticias\",\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/novedades-css-2025\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/novedades-css-2025\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/novedades-css-2025\\\/\",\"name\":\"Novedades CSS 2025 - Blog de maketing | Caronte\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/novedades-css-2025\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/novedades-css-2025\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/novedades-css-2025.jpg\",\"datePublished\":\"2025-01-02T12:32:55+00:00\",\"dateModified\":\"2025-07-18T09:19:56+00:00\",\"description\":\"Ya est\u00e1n aqu\u00ed las principales novedades CSS 2025 para revolucionar el dise\u00f1o web y adaptarlo a las nuevas necesidades y tecnolog\u00edas. \u00a1Vamos!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/novedades-css-2025\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/novedades-css-2025\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/novedades-css-2025\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/novedades-css-2025.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/novedades-css-2025.jpg\",\"width\":1250,\"height\":737,\"caption\":\"Novedades CSS 2025\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/novedades-css-2025\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Novedades CSS 2025\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/2104191b75663e9e9ca47f821c5f92cf\",\"name\":\"David de Lamo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/110df00c652880b6b00cc45fe489d819ac3f1e805e379a5adefc8fce4d1f548c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/110df00c652880b6b00cc45fe489d819ac3f1e805e379a5adefc8fce4d1f548c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/110df00c652880b6b00cc45fe489d819ac3f1e805e379a5adefc8fce4d1f548c?s=96&d=mm&r=g\",\"caption\":\"David de Lamo\"},\"description\":\"David de Lamo te descubre, en el blog de Caronte Web Studio, las tendencias de dise\u00f1o, tanto gr\u00e1fico como web. Nuestro responsable del \u00e1rea de dise\u00f1o en Caronte Web Studio te cuenta todo lo que debes saber sobre imagen de empresa, carteler\u00eda, dise\u00f1o gr\u00e1fico, dise\u00f1o web, papeler\u00eda, rotulaciones... Aprende con \u00e9l y sum\u00e9rgete en el apasionante mundo del dise\u00f1o.\",\"sameAs\":[\"http:\\\/\\\/www.carontestudio.com\"],\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/david\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Novedades CSS 2025 - Blog de maketing | Caronte","description":"Ya est\u00e1n aqu\u00ed las principales novedades CSS 2025 para revolucionar el dise\u00f1o web y adaptarlo a las nuevas necesidades y tecnolog\u00edas. \u00a1Vamos!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carontestudio.com\/blog\/novedades-css-2025\/","og_locale":"es_ES","og_type":"article","og_title":"Novedades CSS 2025 - Blog de maketing | Caronte","og_description":"Ya est\u00e1n aqu\u00ed las principales novedades CSS 2025 para revolucionar el dise\u00f1o web y adaptarlo a las nuevas necesidades y tecnolog\u00edas. \u00a1Vamos!","og_url":"https:\/\/carontestudio.com\/blog\/novedades-css-2025\/","og_site_name":"Blog de maketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2025-01-02T12:32:55+00:00","article_modified_time":"2025-07-18T09:19:56+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/novedades-css-2025.jpg","type":"image\/jpeg"}],"author":"David de Lamo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"David de Lamo","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/novedades-css-2025\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/novedades-css-2025\/"},"author":{"name":"David de Lamo","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/2104191b75663e9e9ca47f821c5f92cf"},"headline":"Novedades CSS 2025","datePublished":"2025-01-02T12:32:55+00:00","dateModified":"2025-07-18T09:19:56+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/novedades-css-2025\/"},"wordCount":1183,"commentCount":0,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/novedades-css-2025\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/novedades-css-2025.jpg","articleSection":["Dise\u00f1o web","Noticias","Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/novedades-css-2025\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/novedades-css-2025\/","url":"https:\/\/carontestudio.com\/blog\/novedades-css-2025\/","name":"Novedades CSS 2025 - Blog de maketing | Caronte","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/novedades-css-2025\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/novedades-css-2025\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/novedades-css-2025.jpg","datePublished":"2025-01-02T12:32:55+00:00","dateModified":"2025-07-18T09:19:56+00:00","description":"Ya est\u00e1n aqu\u00ed las principales novedades CSS 2025 para revolucionar el dise\u00f1o web y adaptarlo a las nuevas necesidades y tecnolog\u00edas. \u00a1Vamos!","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/novedades-css-2025\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/novedades-css-2025\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/novedades-css-2025\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/novedades-css-2025.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/novedades-css-2025.jpg","width":1250,"height":737,"caption":"Novedades CSS 2025"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/novedades-css-2025\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Novedades CSS 2025"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/2104191b75663e9e9ca47f821c5f92cf","name":"David de Lamo","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/110df00c652880b6b00cc45fe489d819ac3f1e805e379a5adefc8fce4d1f548c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/110df00c652880b6b00cc45fe489d819ac3f1e805e379a5adefc8fce4d1f548c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/110df00c652880b6b00cc45fe489d819ac3f1e805e379a5adefc8fce4d1f548c?s=96&d=mm&r=g","caption":"David de Lamo"},"description":"David de Lamo te descubre, en el blog de Caronte Web Studio, las tendencias de dise\u00f1o, tanto gr\u00e1fico como web. Nuestro responsable del \u00e1rea de dise\u00f1o en Caronte Web Studio te cuenta todo lo que debes saber sobre imagen de empresa, carteler\u00eda, dise\u00f1o gr\u00e1fico, dise\u00f1o web, papeler\u00eda, rotulaciones... Aprende con \u00e9l y sum\u00e9rgete en el apasionante mundo del dise\u00f1o.","sameAs":["http:\/\/www.carontestudio.com"],"url":"https:\/\/carontestudio.com\/blog\/author\/david\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/21621","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=21621"}],"version-history":[{"count":19,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/21621\/revisions"}],"predecessor-version":[{"id":24121,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/21621\/revisions\/24121"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/21673"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=21621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=21621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=21621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}