[{"data":1,"prerenderedAt":544},["ShallowReactive",2],{"journal-list":3},[4,303],{"id":5,"title":6,"author":7,"body":8,"coverImage":287,"date":288,"description":289,"draft":290,"extension":291,"galleryImage":287,"h1":6,"label":292,"meta":293,"navigation":294,"order":44,"path":295,"seo":296,"stem":297,"tags":298,"__hash__":302},"journal\u002Fjournal\u002Fios26-safari-toolbar-colors.mdc","Цвета панели Safari в iOS 26","Beneric",{"type":9,"value":10,"toc":276},"minimark",[11,20,23,28,31,75,78,98,101,105,108,120,123,127,135,179,185,189,192,243,246,250,253,257,269,272],[12,13,14,15,19],"p",{},"В iOS 26 Safari заметно иначе работает с цветом системной панели. ",[16,17,18],"code",{},"theme-color"," больше не гарантирует ожидаемый результат: браузер чаще берёт цвет из реального фона страницы.",[12,21,22],{},"Для сайтов с аккуратной визуальной системой это важно. Неправильный фон даёт грязный toolbar, резкий overscroll и ощущение, что страница «не приклеена» к браузеру.",[24,25,27],"h2",{"id":26},"что-изменилось","Что изменилось",[12,29,30],{},"Раньше можно было явно задать цвет:",[32,33,38],"pre",{"className":34,"code":35,"language":36,"meta":37,"style":37},"language-html shiki shiki-themes github-light github-dark","\u003Cmeta name=\"theme-color\" content=\"#f6f1e8\">\n","html","",[16,39,40],{"__ignoreMap":37},[41,42,45,49,53,57,60,64,67,69,72],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sVt8B","\u003C",[41,50,52],{"class":51},"s9eBZ","meta",[41,54,56],{"class":55},"sScJk"," name",[41,58,59],{"class":47},"=",[41,61,63],{"class":62},"sZZnC","\"theme-color\"",[41,65,66],{"class":55}," content",[41,68,59],{"class":47},[41,70,71],{"class":62},"\"#f6f1e8\"",[41,73,74],{"class":47},">\n",[12,76,77],{},"Теперь Safari чаще смотрит на CSS:",[79,80,81,89,92,95],"ol",{},[82,83,84,85,88],"li",{},"фон ",[16,86,87],{},"body",";",[82,90,91],{},"fixed\u002Fsticky-элементы у краёв viewport;",[82,93,94],{},"цвет секции, которая попадает под системную панель;",[82,96,97],{},"системный fallback, если явного цвета нет.",[12,99,100],{},"Поэтому мета-тег остаётся полезным для других браузеров, но в iOS Safari уже не должен быть единственной точкой управления.",[24,102,104],{"id":103},"что-ломается-в-интерфейсах","Что ломается в интерфейсах",[12,106,107],{},"Чаще всего проблемы видны в трёх местах:",[109,110,111,114,117],"ul",{},[82,112,113],{},"верхняя панель берёт цвет прозрачного header;",[82,115,116],{},"нижняя панель в compact-режиме подхватывает цвет footer;",[82,118,119],{},"при SPA-навигации Safari на мгновение показывает цвет предыдущей страницы.",[12,121,122],{},"Если сайт меняет тему или фон через JavaScript после первого рендера, Safari может не пересчитать цвет панели сразу.",[24,124,126],{"id":125},"как-делать-надёжнее","Как делать надёжнее",[128,129,131,132,134],"h3",{"id":130},"держать-body-в-правильном-цвете","Держать ",[16,133,87],{}," в правильном цвете",[32,136,140],{"className":137,"code":138,"language":139,"meta":37,"style":37},"language-css shiki shiki-themes github-light github-dark","html,\nbody {\n  background: #f6f1e8;\n}\n","css",[16,141,142,149,157,173],{"__ignoreMap":37},[41,143,144,146],{"class":43,"line":44},[41,145,36],{"class":51},[41,147,148],{"class":47},",\n",[41,150,152,154],{"class":43,"line":151},2,[41,153,87],{"class":51},[41,155,156],{"class":47}," {\n",[41,158,160,164,167,170],{"class":43,"line":159},3,[41,161,163],{"class":162},"sj4cs","  background",[41,165,166],{"class":47},": ",[41,168,169],{"class":162},"#f6f1e8",[41,171,172],{"class":47},";\n",[41,174,176],{"class":43,"line":175},4,[41,177,178],{"class":47},"}\n",[12,180,181,182,184],{},"Фон ",[16,183,87],{}," влияет не только на toolbar, но и на rubber-band overscroll. Если страница светлая, body тоже должен быть светлым.",[128,186,188],{"id":187},"не-делать-header-полностью-прозрачным","Не делать header полностью прозрачным",[12,190,191],{},"Прозрачный fixed-header отдаёт решение Safari. Лучше задавать явный фон или проектировать первый экран так, чтобы цвет под header всегда был ожидаемым.",[32,193,195],{"className":137,"code":194,"language":139,"meta":37,"style":37},".site-header {\n  position: fixed;\n  top: 0;\n  background: #f6f1e8;\n}\n",[16,196,197,204,216,228,238],{"__ignoreMap":37},[41,198,199,202],{"class":43,"line":44},[41,200,201],{"class":55},".site-header",[41,203,156],{"class":47},[41,205,206,209,211,214],{"class":43,"line":151},[41,207,208],{"class":162},"  position",[41,210,166],{"class":47},[41,212,213],{"class":162},"fixed",[41,215,172],{"class":47},[41,217,218,221,223,226],{"class":43,"line":159},[41,219,220],{"class":162},"  top",[41,222,166],{"class":47},[41,224,225],{"class":162},"0",[41,227,172],{"class":47},[41,229,230,232,234,236],{"class":43,"line":175},[41,231,163],{"class":162},[41,233,166],{"class":47},[41,235,169],{"class":162},[41,237,172],{"class":47},[41,239,241],{"class":43,"line":240},5,[41,242,178],{"class":47},[12,244,245],{},"Если нужен визуально лёгкий header, можно оставить прозрачность только там, где она не конфликтует с системной панелью.",[128,247,249],{"id":248},"проверять-низ-страницы","Проверять низ страницы",[12,251,252],{},"В compact tab bar Safari может брать цвет снизу viewport. Поэтому footer и последние секции должны быть осознанными: либо тот же фон, либо контрастный блок, который нормально выглядит рядом с системной панелью.",[24,254,256],{"id":255},"правило-для-проекта","Правило для проекта",[12,258,259,260,262,263,265,266,268],{},"Сначала задаём корректный CSS-фон для ",[16,261,36],{},", ",[16,264,87],{},", wrapper и fixed-элементов. Потом добавляем ",[16,267,18],{}," как дополнительный сигнал, а не как главный механизм.",[12,270,271],{},"Так сайт ведёт себя стабильнее: Safari получает понятный цвет из layout, а не угадывает его по случайной прозрачности или предыдущему состоянию SPA.",[273,274,275],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":37,"searchDepth":151,"depth":151,"links":277},[278,279,280,286],{"id":26,"depth":151,"text":27},{"id":103,"depth":151,"text":104},{"id":125,"depth":151,"text":126,"children":281},[282,284,285],{"id":130,"depth":159,"text":283},"Держать body в правильном цвете",{"id":187,"depth":159,"text":188},{"id":248,"depth":159,"text":249},{"id":255,"depth":151,"text":256},null,"2026-01-15","Почему Safari в iOS 26 хуже слушает theme-color и как готовить фон, header и overscroll для аккуратного интерфейса.",false,"mdc","iOS 26 Safari",{},true,"\u002Fjournal\u002Fios26-safari-toolbar-colors",{"title":6,"description":289},"journal\u002Fios26-safari-toolbar-colors",[299,300,139,301],"ios","safari","design","o20F7V1TVPw2i23pE4HQ7wGF2HSPq_Hdsor0MVouIEo",{"id":304,"title":305,"author":7,"body":306,"coverImage":287,"date":288,"description":533,"draft":290,"extension":291,"galleryImage":287,"h1":305,"label":534,"meta":535,"navigation":294,"order":151,"path":536,"seo":537,"stem":538,"tags":539,"__hash__":543},"journal\u002Fjournal\u002Fbun-nuxt4-runtime-guide.mdc","Bun и Nuxt 4 в продакшене",{"type":9,"value":307,"toc":526},[308,311,315,346,350,353,367,370,374,408,411,425,432,448,452,459,506,513,517,520,523],[12,309,310],{},"Bun ускоряет установку пакетов, умеет запускать TypeScript без лишних шагов и хорошо подходит для локальной сборки Nuxt-проектов. Но в продакшене важнее не обещанная скорость, а предсказуемость.",[24,312,314],{"id":313},"где-bun-уже-полезен","Где Bun уже полезен",[79,316,317,324,334,340],{},[82,318,319,323],{},[320,321,322],"strong",{},"Установка зависимостей"," — обычно заметно быстрее npm и yarn.",[82,325,326,329,330,333],{},[320,327,328],{},"Скрипты проекта"," — ",[16,331,332],{},"bun run"," хорошо работает для typecheck, build и generate.",[82,335,336,339],{},[320,337,338],{},"Единый инструмент"," — пакетный менеджер, рантайм и запускатор команд в одном бинарнике.",[82,341,342,345],{},[320,343,344],{},"CI и деплой"," — меньше накладных расходов, если вся команда использует один набор команд.",[24,347,349],{"id":348},"где-нужна-осторожность","Где нужна осторожность",[12,351,352],{},"Nuxt 4 поддерживает Bun, но поддержка не равна полной совместимости со всеми модулями. Особенно внимательно проверяем:",[109,354,355,358,361,364],{},[82,356,357],{},"серверные зависимости с нативными бинарниками;",[82,359,360],{},"SQLite и пакеты вокруг Nuxt Content;",[82,362,363],{},"WebSocket\u002FHMR в dev-режиме;",[82,365,366],{},"интеграции, которые ожидают Node.js API.",[12,368,369],{},"Если проект зависит от спорной нативной библиотеки, сначала собираем минимальный прототип и прогоняем production build.",[24,371,373],{"id":372},"базовая-схема-для-nuxt","Базовая схема для Nuxt",[32,375,379],{"className":376,"code":377,"language":378,"meta":37,"style":37},"language-bash shiki shiki-themes github-light github-dark","bun install\nbun run typecheck\nbun run build\n","bash",[16,380,381,389,399],{"__ignoreMap":37},[41,382,383,386],{"class":43,"line":44},[41,384,385],{"class":55},"bun",[41,387,388],{"class":62}," install\n",[41,390,391,393,396],{"class":43,"line":151},[41,392,385],{"class":55},[41,394,395],{"class":62}," run",[41,397,398],{"class":62}," typecheck\n",[41,400,401,403,405],{"class":43,"line":159},[41,402,385],{"class":55},[41,404,395],{"class":62},[41,406,407],{"class":62}," build\n",[12,409,410],{},"Для разработки чаще достаточно обычного режима:",[32,412,414],{"className":376,"code":413,"language":378,"meta":37,"style":37},"bun run dev\n",[16,415,416],{"__ignoreMap":37},[41,417,418,420,422],{"class":43,"line":44},[41,419,385],{"class":55},[41,421,395],{"class":62},[41,423,424],{"class":62}," dev\n",[12,426,427,428,431],{},"Флаг ",[16,429,430],{},"--bun"," стоит включать только осознанно, когда вы действительно хотите запускать Nuxt CLI через Bun runtime:",[32,433,435],{"className":376,"code":434,"language":378,"meta":37,"style":37},"bun --bun run dev\n",[16,436,437],{"__ignoreMap":37},[41,438,439,441,444,446],{"class":43,"line":44},[41,440,385],{"class":55},[41,442,443],{"class":162}," --bun",[41,445,395],{"class":62},[41,447,424],{"class":62},[24,449,451],{"id":450},"продакшен-рантайм","Продакшен-рантайм",[12,453,454,455,458],{},"Если приложение использует Bun-специфичные API, например ",[16,456,457],{},"bun:sqlite",", нужно явно собирать Nitro под Bun:",[32,460,464],{"className":461,"code":462,"language":463,"meta":37,"style":37},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  nitro: {\n    preset: \"bun\",\n  },\n})\n","ts",[16,465,466,481,486,496,501],{"__ignoreMap":37},[41,467,468,472,475,478],{"class":43,"line":44},[41,469,471],{"class":470},"szBVR","export",[41,473,474],{"class":470}," default",[41,476,477],{"class":55}," defineNuxtConfig",[41,479,480],{"class":47},"({\n",[41,482,483],{"class":43,"line":151},[41,484,485],{"class":47},"  nitro: {\n",[41,487,488,491,494],{"class":43,"line":159},[41,489,490],{"class":47},"    preset: ",[41,492,493],{"class":62},"\"bun\"",[41,495,148],{"class":47},[41,497,498],{"class":43,"line":175},[41,499,500],{"class":47},"  },\n",[41,502,503],{"class":43,"line":240},[41,504,505],{"class":47},"})\n",[12,507,508,509,512],{},"Если Bun нужен только как пакетный менеджер и runner для сборки, ",[16,510,511],{},"node-server"," остаётся более универсальным вариантом для хостингов, где окружение заранее настроено под Node.js.",[24,514,516],{"id":515},"практическое-правило","Практическое правило",[12,518,519],{},"Мы используем Bun там, где он снижает трение: установка, локальные команды, CI-сборка. Для серверного рантайма выбираем Bun только после проверки конкретных модулей, логов и деплой-платформы.",[12,521,522],{},"Такой подход даёт скорость без лишнего риска: проект быстрее собирается, но не становится зависимым от экспериментального поведения в критичном месте.",[273,524,525],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}",{"title":37,"searchDepth":151,"depth":151,"links":527},[528,529,530,531,532],{"id":313,"depth":151,"text":314},{"id":348,"depth":151,"text":349},{"id":372,"depth":151,"text":373},{"id":450,"depth":151,"text":451},{"id":515,"depth":151,"text":516},"Короткая практическая заметка о том, где Bun помогает Nuxt 4-проекту, а где безопаснее оставить Node.js.","Bun + Nuxt 4",{},"\u002Fjournal\u002Fbun-nuxt4-runtime-guide",{"title":305,"description":533},"journal\u002Fbun-nuxt4-runtime-guide",[385,540,541,542],"nuxt","runtime","performance","3r8cQURPepkiWPd5y9PJPY2NkToAImeJ4t-Jjf2ef5s",1782692739669]