0.11.15 — zasłona powitalna i odstęp liczony od wysokości okna

Odstęp nad treścią był zapisany jako dwie wartości wybierane progiem szerokości: jedna dla telefonu, druga od monitora. Wyglądało to rozsądnie i przez kilka miesięcy nikomu nie przeszkadzało. Pytanie było jednak postawione o niewłaściwą rzecz.

Telefon położony na bok ma około czterystu pikseli wysokości. Nagłówek zjada z tego sto pięćdziesiąt sześć, odstęp kolejne dziewięćdziesiąt sześć — i na stronie serii nie mieści się już ani jedna pozycja listy. Czytelnik widzi nazwę serwisu, nawigację i nic więcej. Gorzej: dwie zupełnie różne serie wyglądają wtedy tak samo, bo z obu widać wyłącznie to, co jest wspólne. Strona nie wygląda na zwiniętą, tylko na popsutą.

Próg szerokości nie mógł tego złapać, bo szerokość w tym momencie jest duża. Mały jest pion. Odstęp liczy się więc teraz z wysokości okna: wartość minimalna, wartość zależna od okna i sufit. Na telefonie trzymanym pionowo wychodzi osiemdziesiąt dziewięć pikseli zamiast dotychczasowych dziewięćdziesięciu sześciu, czyli praktycznie to samo. Na monitorze sufit ucina wynik do stu dwudziestu ośmiu, czyli dokładnie tyle, co poprzednio. Kurczy się wyłącznie tam, gdzie było źle.

Jednostką jest svh, czyli najmniejsze okno, jakie przeglądarka mobilna pokazuje — z wysuniętym paskiem adresu. Dzięki temu odstęp nie skacze, gdy pasek chowa się przy przewijaniu. Zapas dla przeglądarek, które svh nie znają, musiał trafić do osobnego bloku warunkowego: minifikator kasuje wcześniejszą deklarację tej samej właściwości, więc zapisany zwyczajnie po prostu nie przeżywał budowania.

Druga rzecz w tym wydaniu jest z innego porządku. Instancja może teraz pokazać zasłonę powitalną: własny znak na barwie z manifestu, potem przenikanie do treści. Zainstalowana aplikacja dostaje taki ekran od systemu, strona nie dostawała go znikąd.

Zasłona nie jest komponentem w zwykłym sensie i nie mogła nim być. Gdyby czekała na hydratację, pojawiłaby się dopiero wtedy, gdy strona i tak jest widoczna — czyli mignięcie treści, zakrycie, odkrycie. Odwrotność zamiaru. Decyzja o pokazaniu zapada więc we wklejonym skrypcie w nagłówku dokumentu, przed pierwszym malowaniem, a React dostarcza tylko warstwę i reguły.

Wszystko, co z tym związane, ma domyślnie nie działać. Warstwa jest niewidoczna, dopóki skrypt jej nie odsłoni, więc czytelnik bez JavaScriptu zobaczy po prostu treść. Instancja bez znaku nie pokazuje niczego, bo zasłona bez znaku byłaby samym opóźnieniem. Prośba o ograniczenie ruchu wyłącza całość. Zasłona schodzi w chwili, gdy fonty są gotowe — czyli dokładnie wtedy, gdy krój podmienia się z zastępczego i strona i tak drga — z progiem, żeby nie mignęła jak usterka, i z twardym sufitem, żeby brak fontów nie zostawił białej strony.

Wniosek jest ten sam w obu połowach wydania. Warto sprawdzić, czy pytanie zadane w kodzie dotyczy tej wielkości, która naprawdę uwiera.