Łącznik CSS
Łącz dwa pliki CSS w jeden
Plik CSS 1
Plik CSS 2
Połączony CSS
Przykłady łączenia CSS
Wklej dwa pliki CSS — po jednym w każdym edytorze wejściowym — a narzędzie scala je w jeden arkusz stylów:
Reset/baza + style komponentów
Kliknij Przykład, aby załadować przykładowy CSS do obu edytorów i natychmiast zobaczyć scalony wynik.
Czym jest Łącznik CSS?
Projekty CSS często dzielą style na wiele plików — reset, baza, komponenty, narzędziowe. Łącznik CSS scala je w jeden plik do produkcji. Mniej żądań HTTP oznacza szybsze czasy ładowania. Specyfikacja W3C CSS definiuje język; narzędzia do budowania takie jak Vite i Webpack robią to podczas budowania. To narzędzie oferuje szybki edytor z podwójnym wejściem bezpośrednio w przeglądarce.
Wklej swój pierwszy plik CSS do górnego lewego edytora, a drugi do dolnego lewego edytora (lub użyj Wczytaj na każdym panelu). Prawy panel automatycznie łączy oba wejścia. Wszystko działa w przeglądarce — nic nie jest wysyłane na serwer. Do formatowania wyniku użyj Formatera CSS. Do minifikacji użyj Minifikatora CSS.
Jak używać tego narzędzia
Wklej lub wczytaj CSS
Wklej swój pierwszy plik CSS do górnego lewego edytora, a drugi plik do dolnego lewego edytora. Każdy panel ma własny przycisk Wczytaj do ładowania plików .css pojedynczo. Użyj Przykład, aby załadować przykładowe dane do obu edytorów jednocześnie.
Sprawdź połączone wyjście
Prawy panel automatycznie łączy oba wejścia. Plik 1 pojawia się pierwszy, po nim plik 2. Do walidacji użyj Walidatora CSS. Do dodawania prefiksów vendor użyj Prefiksera CSS.
Kopiuj lub pobierz
Użyj Kopiuj lub Pobierz, aby zapisać połączony CSS. Aby najpierw skonwertować SCSS lub Less, użyj SCSS do CSS lub Less do CSS.
Kiedy łączenie CSS pomaga
Starsze projekty lub ręcznie tworzone strony mogą mieć wiele plików CSS. Łączenie ich zmniejsza liczbę żądań i upraszcza wdrożenie. Bootstrap i Tailwind używają potoków budowania; to narzędzie oferuje szybką opcję ręczną z dwoma dedykowanymi panelami wejściowymi. Do wyodrębniania CSS z HTML użyj Ekstraktora CSS.
Do formatowania połączonego wyjścia użyj Formatera CSS. Do stylów inline (np. e-mail) użyj CSS do Inline. Do konwersji między preprocesorami użyj CSS do SCSS lub CSS do Less.
Często zadawane pytania
Czy moje dane są prywatne?
Tak. Łączenie odbywa się całkowicie w przeglądarce. Żadne dane nie są wysyłane na żaden serwer.
Co jeśli oba pliki mają ten sam selektor?
Narzędzie zachowuje oba bez zmian. To bezpieczne, ponieważ kaskada CSS sprawia, że przy równej specyficzności wygrywa ostatnia reguła — dokładnie tak, jak przeglądarki obsługują wiele arkuszy stylów. Jeśli potrzebujesz zaawansowanej deduplikacji, użyj narzędzi budowania takich jak cssnano lub PostCSS.
Co z @import?
Narzędzie łączy tekst tak jak jest. Nie rozwiązuje adresów URL @import. W razie potrzeby ręcznie wstaw lub wklej importowaną zawartość.
Jak wczytać pliki?
Każdy panel wejściowy ma własny przycisk Wczytaj. Kliknij go, aby wybrać plik .css dla danego panelu. Plik 1 trafia do górnego lewego edytora, plik 2 do dolnego lewego.
Czy kolejność plików ma znaczenie?
Tak. Plik 1 pojawia się pierwszy w wyjściu, potem plik 2. Późniejsze reguły zastępują wcześniejsze, gdy specyficzność jest równa. Ułóż pliki odpowiednio.