/* * CSS PARA NAVEGADOR ANTIGO — o irmão do polyfills.js (14/set/2026). * * O polyfills.js conserta o JAVASCRIPT em aparelho velho. Este conserta o * ESTILO, e nasceu da Gertec TS-G810 da unidade do SUS: o WebView dela é * Chrome 83 (da ROM, sem Play Store — não há como atualizar), o JS do portal * rodava, os dados apareciam… e a tela saía SEM ESTILO NENHUM, texto preto * empilhado no branco. * * Três motivos, todos do Tailwind v4 (que assume Chrome 111+): * * 1. `@layer` (cascade layers, Chrome 99+). O Tailwind emite a folha INTEIRA * dentro de `@layer theme, base, components, utilities`. At-rule * desconhecida faz o navegador pular o bloco todo — 347 KB de CSS viram * zero. É este o item que produz a tela "crua". * 2. PROPRIEDADES LÓGICAS (`padding-inline`, `margin-block`, `inset-*`, * Chrome 87+). É assim que o Tailwind v4 escreve `px-10` e `py-6`: sem * elas, nenhum espaçamento aplica. * 3. `color-mix()` (Chrome 111+) — como o Tailwind faz opacidade de cor. * Aqui a cor sólida entra no lugar (perde a transparência, mantém a cor). * * Tudo é feature-detect: em navegador moderno este arquivo não faz NADA além * de duas checagens de suporte. ES5-safe de propósito — é servido cru. * * ⚠️ Não substitui navegador atual. É o que mantém de pé o aparelho que a * loja não atualiza mais. Ao comprar novos, a regra da casa continua valendo: * Android 11+ com Play Store (docs/71). */ (function () { "use strict"; try { // ── 1 · vale a pena? ──────────────────────────────────────────────── var teste = document.createElement("style"); teste.textContent = "@layer cdatst{.cdatst{--cdatst:1}}"; (document.head || document.documentElement).appendChild(teste); var temLayer = false; try { temLayer = !!(teste.sheet && teste.sheet.cssRules && teste.sheet.cssRules.length); } catch (e) {} if (teste.parentNode) teste.parentNode.removeChild(teste); var sonda = document.createElement("div"); sonda.style.setProperty("padding-inline", "1px"); var temLogicas = sonda.style.getPropertyValue("padding-inline") !== ""; var temColorMix = false; try { temColorMix = !!(window.CSS && CSS.supports && CSS.supports("color: color-mix(in oklab, red 50%, transparent)")); } catch (e) {} /** * SÓ ENTRA ONDE A TELA JÁ ESTÁ QUEBRADA. O gatilho é `@layer` ou as * propriedades lógicas — sem uma delas não há estilo nenhum, e traduzir só * melhora. Faltar APENAS o `color-mix` (Chrome 99–110) não é motivo: ali a * tela está inteira, e trocar transparência por cor sólida deixaria um * fundo de modal opaco onde hoje ele é discreto. Mexer seria piorar. */ if (temLayer && temLogicas) return; // ── 2 · as três traduções ─────────────────────────────────────────── /** desdobra `@layer nome { … }` mantendo o conteúdo, e apaga `@layer a,b;` */ function desdobrarLayers(css) { var fora = "", i = 0; while (i < css.length) { var p = css.indexOf("@layer", i); if (p < 0) { fora += css.slice(i); break; } fora += css.slice(i, p); var j = p + 6; while (j < css.length && css.charAt(j) !== "{" && css.charAt(j) !== ";") j++; if (css.charAt(j) === ";") { i = j + 1; continue; } // só declara a ordem var nivel = 0, k = j; for (; k < css.length; k++) { var c = css.charAt(k); if (c === "{") nivel++; else if (c === "}") { nivel--; if (nivel === 0) break; } } fora += desdobrarLayers(css.slice(j + 1, k)); // layers aninhadas i = k + 1; } return fora; } /** `color-mix(in oklab, COR 40%, transparent)` → `COR` */ function semColorMix(css) { var fora = "", i = 0; while (true) { var p = css.indexOf("color-mix(", i); if (p < 0) { fora += css.slice(i); break; } fora += css.slice(i, p); var nivel = 0, k = p + 9; for (; k < css.length; k++) { var c = css.charAt(k); if (c === "(") nivel++; else if (c === ")") { nivel--; if (nivel === 0) break; } } var dentro = css.slice(p + 10, k); var partes = [], prof = 0, atual = ""; for (var x = 0; x < dentro.length; x++) { var ch = dentro.charAt(x); if (ch === "(") prof++; else if (ch === ")") prof--; if (ch === "," && prof === 0) { partes.push(atual); atual = ""; } else atual += ch; } partes.push(atual); // partes: ["in oklab", "COR 40%", "transparent"] → fica a COR var cor = (partes[1] || "currentColor").replace(/^\s+|\s+$/g, "").replace(/\s+[\d.]+%\s*$/, ""); fora += cor || "currentColor"; i = k + 1; } return fora; } /** propriedades lógicas → as físicas de sempre */ function fisicas(css) { function doisValores(v) { var m = v.replace(/^\s+|\s+$/g, "").split(/\s+(?![^(]*\))/); return m.length > 1 ? m : [m[0], m[0]]; } function par(prop, a, b) { return function (_, v) { var d = doisValores(v); return prop + "-" + a + ":" + d[0] + ";" + prop + "-" + b + ":" + d[1]; }; } return css .replace(/padding-inline:([^;}]+)/g, par("padding", "left", "right")) .replace(/padding-block:([^;}]+)/g, par("padding", "top", "bottom")) .replace(/padding-inline-start:/g, "padding-left:") .replace(/padding-inline-end:/g, "padding-right:") .replace(/padding-block-start:/g, "padding-top:") .replace(/padding-block-end:/g, "padding-bottom:") .replace(/margin-inline:([^;}]+)/g, par("margin", "left", "right")) .replace(/margin-block:([^;}]+)/g, par("margin", "top", "bottom")) .replace(/margin-inline-start:/g, "margin-left:") .replace(/margin-inline-end:/g, "margin-right:") .replace(/margin-block-start:/g, "margin-top:") .replace(/margin-block-end:/g, "margin-bottom:") .replace(/inset-inline:([^;}]+)/g, function (_, v) { var d = doisValores(v); return "left:" + d[0] + ";right:" + d[1]; }) .replace(/inset-block:([^;}]+)/g, function (_, v) { var d = doisValores(v); return "top:" + d[0] + ";bottom:" + d[1]; }) .replace(/inset-inline-start:/g, "left:") .replace(/inset-inline-end:/g, "right:") .replace(/inset-block-start:/g, "top:") .replace(/inset-block-end:/g, "bottom:") .replace(/([;{])inset:([^;}]+)/g, function (_, antes, v) { var a = v.replace(/^\s+|\s+$/g, "").split(/\s+(?![^(]*\))/); var t = a[0], r = a[1] || t, b = a[2] || t, l = a[3] || r; return antes + "top:" + t + ";right:" + r + ";bottom:" + b + ";left:" + l; }) .replace(/border-inline-start-/g, "border-left-") .replace(/border-inline-end-/g, "border-right-") .replace(/border-block-start-/g, "border-top-") .replace(/border-block-end-/g, "border-bottom-") // :focus-visible (Chrome 86) — sem ele a regra inteira some .replace(/:focus-visible/g, ":focus"); } function traduzir(css) { var fora = css; if (!temLayer) fora = desdobrarLayers(fora); if (!temColorMix) fora = semColorMix(fora); if (!temLogicas) fora = fisicas(fora); return fora; } // ── 3 · aplicar em cada folha, sem piscar ─────────────────────────── /** * A TELA FICA ESCONDIDA ENQUANTO TRADUZ. Sem isto o aparelho pinta a * página crua, e só depois o estilo entra — e um totem que "pisca feio" * na frente do paciente é pior que um segundo a mais de espera. O * temporizador de 4 s é a rede de segurança: se algo falhar no meio, a * tela aparece assim mesmo, sem estilo, mas aparece. */ var raiz = document.documentElement; var visibilidadeOriginal = raiz.style.visibility; raiz.style.visibility = "hidden"; var jaMostrou = false; function mostrar() { if (jaMostrou) return; jaMostrou = true; raiz.style.visibility = visibilidadeOriginal || ""; } setTimeout(mostrar, 4000); var pendentes = 0, varreuTudo = false; function talvezMostrar() { if (varreuTudo && pendentes === 0) mostrar(); } var feitos = {}; function traduzirFolha(link) { var href = link.href; if (!href || feitos[href]) return; feitos[href] = true; // só o nosso domínio: folha de terceiro não é problema nosso e pode nem // liberar leitura (CORS) if (href.indexOf(location.origin) !== 0) return; pendentes++; var req = new XMLHttpRequest(); req.open("GET", href, true); req.onreadystatechange = function () { if (req.readyState !== 4) return; try { if (req.status >= 200 && req.status < 300) { var novo = document.createElement("style"); novo.setAttribute("data-css-antigo", "1"); novo.textContent = traduzir(req.responseText); // logo DEPOIS do link original, para a ordem da cascata continuar a mesma if (link.parentNode) link.parentNode.insertBefore(novo, link.nextSibling); else (document.head || document.documentElement).appendChild(novo); } } catch (e) {} pendentes--; talvezMostrar(); }; try { req.send(); } catch (e) { pendentes--; talvezMostrar(); } } function varrer() { var links = document.querySelectorAll('link[rel="stylesheet"]'); for (var i = 0; i < links.length; i++) traduzirFolha(links[i]); } varrer(); // as folhas do Next entram no durante o parse e nas trocas de tela if (window.MutationObserver) { new MutationObserver(varrer).observe(document.documentElement, { childList: true, subtree: true }); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", function () { varrer(); varreuTudo = true; talvezMostrar(); }); } else { varreuTudo = true; talvezMostrar(); } window.addEventListener("load", function () { varrer(); varreuTudo = true; talvezMostrar(); }); } catch (e) { try { document.documentElement.style.visibility = ""; } catch (e2) {} } })();

Entrar

Entrar