Konwerter jednostek CSS

Do czego służy Konwerter jednostek CSS

Konwerter jednostek CSS przelicza wartości między px, rem, em i pt przy konfigurowalnych rozmiarach bazowych. Przydaje się, gdy przenosisz design token do CSS, sprawdzasz skale typograficzne, konwertujesz stary arkusz stylów, porównujesz wartości w punktach przeznaczone do druku lub decydujesz, czy komponent powinien używać rozmiarów względnych do elementu głównego czy do samego elementu. Wpisz wartość źródłową, wybierz jej jednostkę, ustaw rozmiary czcionki elementu głównego i elementu, a odpowiedniki zaktualizują się natychmiast. Konwerter traktuje rem jako wartość względną do rozmiaru czcionki elementu głównego, a em jako względną do rozmiaru czcionki bieżącego elementu.

Przeliczanie pikseli i punktów opiera się na zależności z CSS, w której jeden punkt to jeden i jedna trzecia piksela, czyli jeden piksel to 0,75 punktu. Wyświetlenie wszystkich odpowiedników naraz ułatwia sprawdzenie, czy token odstępu lub rozmiaru czcionki pasuje do reszty skali. Przycisk kopiowania tworzy zwarte, wieloliniowe podsumowanie do notatek, pull requestów lub przeglądów tokenów.

Prywatna praca w przeglądarce

Całe przetwarzanie odbywa się w Twojej przeglądarce za pomocą JavaScriptu po stronie klienta. Narzędzie nie przesyła na serwer fragmentów kodu, wartości konfiguracji, wygenerowanych danych, treści zapytań ani skopiowanych przykładów i nie wymaga konta. Model wyłącznie lokalny ma znaczenie w narzędziach dla programistów, ponieważ wklejana zawartość często przypomina prawdziwe dane aplikacji: odpowiedzi API, logi, próbki podobne do zmiennych środowiskowych, zapytania do baz danych, znaczniki z wersji roboczych czy wartości skopiowane z sesji debugowania na produkcji. Lokalne przetwarzanie zmniejsza ryzyko i sprawia, że działanie jest szybkie, bo nie ma komunikacji przez sieć.

Interfejs jest celowo zwarty, abyś mógł wkleić dane, dostosować opcje, sprawdzić wynik, skopiować go i wrócić do edytora. Wyniki nadal warto przejrzeć, zanim trafią do repozytorium, zostaną udostępnione publicznie lub użyte w procesie produkcyjnym. Narzędzia przeglądarkowe świetnie nadają się do szybkiej inspekcji i przygotowania, ale nie znają wszystkich konwencji projektu, zasad klasyfikacji danych ani wymagań walidacji specyficznych dla aplikacji.

Praktyczne wskazówki

Używaj rem dla wartości, które mają podążać za korzeniem dokumentu, takich jak dostępne rozmiary czcionek i odstępy układu powiązane z preferencjami użytkownika. Używaj em, gdy wartość ma skalować się razem z rozmiarem czcionki samego komponentu, na przykład przy wyrównaniu ikon, lokalnym paddingu czy zagnieżdżonej typografii. Ostrożnie stosuj px dla dokładnych obramowań, grafik rastrowych i przypadków, w których skalowanie względne jest niepożądane. Rzeczywiste obliczone rozmiary mogą zależeć od ustawień przeglądarki, dziedziczenia, powiększenia, zapytań medialnych i stylów specyficznych dla kontenera, więc ważne wartości sprawdzaj w narzędziach deweloperskich.