[{"data":1,"prerenderedAt":302},["ShallowReactive",2],{"journal:\u002Fjournal\u002Fios26-safari-toolbar-colors":3},{"id":4,"title":5,"author":6,"body":7,"coverImage":286,"date":287,"description":288,"draft":289,"extension":290,"galleryImage":286,"h1":5,"label":291,"meta":292,"navigation":293,"order":43,"path":294,"seo":295,"stem":296,"tags":297,"__hash__":301},"journal\u002Fjournal\u002Fios26-safari-toolbar-colors.mdc","Цвета панели Safari в iOS 26","Beneric",{"type":8,"value":9,"toc":275},"minimark",[10,19,22,27,30,74,77,97,100,104,107,119,122,126,134,178,184,188,191,242,245,249,252,256,268,271],[11,12,13,14,18],"p",{},"В iOS 26 Safari заметно иначе работает с цветом системной панели. ",[15,16,17],"code",{},"theme-color"," больше не гарантирует ожидаемый результат: браузер чаще берёт цвет из реального фона страницы.",[11,20,21],{},"Для сайтов с аккуратной визуальной системой это важно. Неправильный фон даёт грязный toolbar, резкий overscroll и ощущение, что страница «не приклеена» к браузеру.",[23,24,26],"h2",{"id":25},"что-изменилось","Что изменилось",[11,28,29],{},"Раньше можно было явно задать цвет:",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-html shiki shiki-themes github-light github-dark","\u003Cmeta name=\"theme-color\" content=\"#f6f1e8\">\n","html","",[15,38,39],{"__ignoreMap":36},[40,41,44,48,52,56,59,63,66,68,71],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sVt8B","\u003C",[40,49,51],{"class":50},"s9eBZ","meta",[40,53,55],{"class":54},"sScJk"," name",[40,57,58],{"class":46},"=",[40,60,62],{"class":61},"sZZnC","\"theme-color\"",[40,64,65],{"class":54}," content",[40,67,58],{"class":46},[40,69,70],{"class":61},"\"#f6f1e8\"",[40,72,73],{"class":46},">\n",[11,75,76],{},"Теперь Safari чаще смотрит на CSS:",[78,79,80,88,91,94],"ol",{},[81,82,83,84,87],"li",{},"фон ",[15,85,86],{},"body",";",[81,89,90],{},"fixed\u002Fsticky-элементы у краёв viewport;",[81,92,93],{},"цвет секции, которая попадает под системную панель;",[81,95,96],{},"системный fallback, если явного цвета нет.",[11,98,99],{},"Поэтому мета-тег остаётся полезным для других браузеров, но в iOS Safari уже не должен быть единственной точкой управления.",[23,101,103],{"id":102},"что-ломается-в-интерфейсах","Что ломается в интерфейсах",[11,105,106],{},"Чаще всего проблемы видны в трёх местах:",[108,109,110,113,116],"ul",{},[81,111,112],{},"верхняя панель берёт цвет прозрачного header;",[81,114,115],{},"нижняя панель в compact-режиме подхватывает цвет footer;",[81,117,118],{},"при SPA-навигации Safari на мгновение показывает цвет предыдущей страницы.",[11,120,121],{},"Если сайт меняет тему или фон через JavaScript после первого рендера, Safari может не пересчитать цвет панели сразу.",[23,123,125],{"id":124},"как-делать-надёжнее","Как делать надёжнее",[127,128,130,131,133],"h3",{"id":129},"держать-body-в-правильном-цвете","Держать ",[15,132,86],{}," в правильном цвете",[31,135,139],{"className":136,"code":137,"language":138,"meta":36,"style":36},"language-css shiki shiki-themes github-light github-dark","html,\nbody {\n  background: #f6f1e8;\n}\n","css",[15,140,141,148,156,172],{"__ignoreMap":36},[40,142,143,145],{"class":42,"line":43},[40,144,35],{"class":50},[40,146,147],{"class":46},",\n",[40,149,151,153],{"class":42,"line":150},2,[40,152,86],{"class":50},[40,154,155],{"class":46}," {\n",[40,157,159,163,166,169],{"class":42,"line":158},3,[40,160,162],{"class":161},"sj4cs","  background",[40,164,165],{"class":46},": ",[40,167,168],{"class":161},"#f6f1e8",[40,170,171],{"class":46},";\n",[40,173,175],{"class":42,"line":174},4,[40,176,177],{"class":46},"}\n",[11,179,180,181,183],{},"Фон ",[15,182,86],{}," влияет не только на toolbar, но и на rubber-band overscroll. Если страница светлая, body тоже должен быть светлым.",[127,185,187],{"id":186},"не-делать-header-полностью-прозрачным","Не делать header полностью прозрачным",[11,189,190],{},"Прозрачный fixed-header отдаёт решение Safari. Лучше задавать явный фон или проектировать первый экран так, чтобы цвет под header всегда был ожидаемым.",[31,192,194],{"className":136,"code":193,"language":138,"meta":36,"style":36},".site-header {\n  position: fixed;\n  top: 0;\n  background: #f6f1e8;\n}\n",[15,195,196,203,215,227,237],{"__ignoreMap":36},[40,197,198,201],{"class":42,"line":43},[40,199,200],{"class":54},".site-header",[40,202,155],{"class":46},[40,204,205,208,210,213],{"class":42,"line":150},[40,206,207],{"class":161},"  position",[40,209,165],{"class":46},[40,211,212],{"class":161},"fixed",[40,214,171],{"class":46},[40,216,217,220,222,225],{"class":42,"line":158},[40,218,219],{"class":161},"  top",[40,221,165],{"class":46},[40,223,224],{"class":161},"0",[40,226,171],{"class":46},[40,228,229,231,233,235],{"class":42,"line":174},[40,230,162],{"class":161},[40,232,165],{"class":46},[40,234,168],{"class":161},[40,236,171],{"class":46},[40,238,240],{"class":42,"line":239},5,[40,241,177],{"class":46},[11,243,244],{},"Если нужен визуально лёгкий header, можно оставить прозрачность только там, где она не конфликтует с системной панелью.",[127,246,248],{"id":247},"проверять-низ-страницы","Проверять низ страницы",[11,250,251],{},"В compact tab bar Safari может брать цвет снизу viewport. Поэтому footer и последние секции должны быть осознанными: либо тот же фон, либо контрастный блок, который нормально выглядит рядом с системной панелью.",[23,253,255],{"id":254},"правило-для-проекта","Правило для проекта",[11,257,258,259,261,262,264,265,267],{},"Сначала задаём корректный CSS-фон для ",[15,260,35],{},", ",[15,263,86],{},", wrapper и fixed-элементов. Потом добавляем ",[15,266,17],{}," как дополнительный сигнал, а не как главный механизм.",[11,269,270],{},"Так сайт ведёт себя стабильнее: Safari получает понятный цвет из layout, а не угадывает его по случайной прозрачности или предыдущему состоянию SPA.",[272,273,274],"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":36,"searchDepth":150,"depth":150,"links":276},[277,278,279,285],{"id":25,"depth":150,"text":26},{"id":102,"depth":150,"text":103},{"id":124,"depth":150,"text":125,"children":280},[281,283,284],{"id":129,"depth":158,"text":282},"Держать body в правильном цвете",{"id":186,"depth":158,"text":187},{"id":247,"depth":158,"text":248},{"id":254,"depth":150,"text":255},null,"2026-01-15","Почему Safari в iOS 26 хуже слушает theme-color и как готовить фон, header и overscroll для аккуратного интерфейса.",false,"mdc","iOS 26 Safari",{},true,"\u002Fjournal\u002Fios26-safari-toolbar-colors",{"title":5,"description":288},"journal\u002Fios26-safari-toolbar-colors",[298,299,138,300],"ios","safari","design","o20F7V1TVPw2i23pE4HQ7wGF2HSPq_Hdsor0MVouIEo",1782692743946]