{"id":1628,"date":"2025-12-12T17:15:42","date_gmt":"2025-12-12T16:15:42","guid":{"rendered":"https:\/\/bitsolto.com\/bitacora\/?p=1628"},"modified":"2025-12-12T17:17:52","modified_gmt":"2025-12-12T16:17:52","slug":"a-funcion-css-if","status":"publish","type":"post","link":"https:\/\/bitsolto.com\/bitacora\/blog\/a-funcion-css-if\/","title":{"rendered":"A funci\u00f3n CSS if()"},"content":{"rendered":"

Cantas veces pensaches en poder establecer propiedades CSS base\u00e1ndote en determinadas condici\u00f3ns: Si se da unha condici\u00f3n aplicamos un estilo, se a condici\u00f3n cambia, o estilo tam\u00e9n cambia<\/em>?<\/p>\n

Seguro que para responder esta pregunta se che ocorren unhas cantas soluci\u00f3ns.<\/p>\n

a) empregar calc()<\/code> con variables CSS (–var)<\/strong><\/h3>\n

O m\u00e1is pr\u00f3ximo a l\u00f3xica condicional:<\/p>\n

:root {\n  --es-grande: 0; \/* 0 = falso, 1 = verdadeiro *\/\n}\n\n.elemento {\n  \/* Se --es-grande \u00e9 1 \u2192 200px, se \u00e9 0 \u2192 100px *\/\n  width: calc(100px + var(--es-grande) * 100px);\n  height: calc(50px + var(--es-grande) * 50px);\n}<\/code><\/pre>\n
b) Variables CSS con valores alternativos (var(--a, fallback)<\/code>)<\/strong><\/h3>\n
.elemento {\n  --mi-ancho: var(--ancho-personalizado, 200px); \/* Fallback *\/\n  width: var(--mi-ancho);\n}<\/code><\/pre>\n
c) Media Queries (condici\u00f3ns baseadas no contexto)<\/strong><\/h3>\n
\/* "If" a pantalla \u00e9 maior de 768px *\/\n.elemento {\n  width: 100%;\n}\n\n@media (min-width: 768px) {\n  .elemento {\n    width: 50%; \/* Valor diferente *\/\n  }\n}<\/code><\/pre>\n
d) min()<\/code>, max()<\/code>, clamp()<\/code> (l\u00f3xica matem\u00e1tica)<\/strong><\/h3>\n
Soporte total en navegadores modernos<\/strong> (2024+).<\/p>\n
\/* Exemplo pr\u00e1ctico: Ancho responsivo con l\u00edmites *\/\n.contenedor {\n  width: min(100%, 1200px); \/* Nunca m\u00e1is de 1200px *\/\n}\n\n\/* Font-size responsiva *\/\n.texto {\n  font-size: clamp(1rem, 2.5vw, 2rem); \/* M\u00ednimo 1rem, m\u00e1ximo 2rem *\/\n}\n\n\/* "If" impl\u00edcito con max() *\/\n.boton {\n  padding: max(1rem, 3%); \/* O maior dos dous valores *\/\n}<\/code><\/pre>\n
e) @supports<\/code> (feature queries)<\/strong><\/h3>\n
\/* "if" o navegador soporta grid *\/\n@supports (display: grid) {\n  .contenedor {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  }\n}\n\n\/* "if" NON soporta grid *\/\n@supports not (display: grid) {\n  .contenedor {\n    display: flex;\n    flex-wrap: wrap;\n  }\n}<\/code><\/pre>\n
Vexamos alg\u00fans exemplos de todo isto:<\/p>\n
Exemplo 1: Tema claro\/escuro<\/strong><\/h3>\n
:root {\n  --tema: 0; \/* 0 = claro, 1 = escuro *\/\n  --fondo: calc(255 - var(--tema) * 200);\n  --texto: calc(var(--tema) * 200);\n}\n\nbody {\n  background-color: rgb(var(--fondo), var(--fondo), var(--fondo));\n  color: rgb(var(--texto), var(--texto), var(--texto));\n}<\/code><\/pre>\n
Exemplo 2: Layout condicional<\/strong><\/h3>\n
:root {\n  --sidebar-active: 0; \/* 0 = oculto, 1 = visible *\/\n}\n\n.main-content {\n  width: calc(100% - var(--sidebar-active) * 300px);\n}\n\n.sidebar {\n  transform: translateX(calc((1 - var(--sidebar-active)) * -100%));\n}<\/code><\/pre>\n
Exemplo 3: Spacing responsive con clamp()<\/strong><\/h3>\n
.card {\n  \/* Espazo que cambia co ancho pero con l\u00edmites *\/\n  padding: clamp(1rem, 5vw, 3rem);\n  margin: clamp(0.5rem, 3vw, 2rem);\n\n  \/* Gap condicional *\/\n  gap: max(1rem, min(4vw, 2rem));\n}<\/code><\/pre>\n
Soporte dos navegadores (2025)<\/strong><\/h3>\n\n\n\n\n\n\n\n\n\n\n
T\u00e9cnica<\/th>\nChrome<\/th>\nFirefox<\/th>\nSafari<\/th>\nEdge<\/th>\nSoporte<\/th>\n<\/tr>\n<\/thead>\n
min()<\/code>\/max()<\/code><\/td>\n79+<\/td>\n75+<\/td>\n13.1+<\/td>\n79+<\/td>\nTotal<\/strong><\/td>\n<\/tr>\n
clamp()<\/code><\/td>\n79+<\/td>\n75+<\/td>\n13.1+<\/td>\n79+<\/td>\nTotal<\/strong><\/td>\n<\/tr>\n
calc()<\/code><\/td>\n26+<\/td>\n16+<\/td>\n7+<\/td>\n12+<\/td>\nTotal<\/strong><\/td>\n<\/tr>\n
@supports<\/code><\/td>\n28+<\/td>\n22+<\/td>\n9+<\/td>\n12+<\/td>\nTotal<\/strong><\/td>\n<\/tr>\n
Variables CSS<\/td>\n49+<\/td>\n31+<\/td>\n9.1+<\/td>\n15+<\/td>\nTotal<\/strong><\/td>\n<\/tr>\n
if()<\/code> proposta<\/td>\n137+<\/td>\n\u274c<\/td>\n\u274c<\/td>\n\u274c<\/td>\nM\u00ednimo<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Vale! iso \u00e9 algo que xa fixeches moitas veces con axuda de JavaScript ou recorrendo a t\u00e9cnicas alternativas en CSS como as que se enumeran aqu\u00ed. Pero, e que che parecer\u00eda poder facelo con s\u00f3 CSS?<\/p>\n
Desde fai xa tempo existe unha proposta<\/strong> para if()<\/code> no borrador de CSS Values Level 4<\/em>, pero polo de agora ning\u00fan navegador o soporta actualmente<\/strong> de forma nativa, excepto Chrome 137+.<\/p>\n
Certo que case ning\u00fan outro navegador lle da soporte, de momento. Pero todo se andar\u00e1!<\/p>\n
Pero mentres  agardamos pola extensi\u00f3n completa do soporte de if()<\/code> nativo en CSS, as funci\u00f3ns min()<\/code>, max()<\/code>, clamp()<\/code>, calc()<\/code> combinadas con variables CSS e @supports<\/code><\/strong> ofrecen capacidades de l\u00f3xica moi potentes con soporte universal en navegadores modernos<\/strong>. <\/p>\n
    \n
  1. clamp()<\/code><\/strong> para valores responsivos con l\u00edmites<\/li>\n
  2. @supports<\/code><\/strong> para fallbacks compatibles<\/li>\n
  3. combinaci\u00f3n de t\u00e9cnicas<\/strong> para l\u00f3xica complexa:<\/li>\n<\/ol>\n
    .elemento {\n  \/* l\u00f3xica condicional complexa *\/\n  width: var(--custom-width, clamp(300px, 50vw, 800px));\n}<\/code><\/pre>\n
      \n
    1. Para casos complexos, os preprocesadores seguen sendo unha opci\u00f3n v\u00e1lida, con ferramentas para "CSS condicional"<\/strong> como:\n