Zaktualizuj CSS witryny bez odświeżania strony


81

Stworzyłem stronę z CSS. Teraz muszę zmienić edytor na przeglądarkę i odświeżyć całą stronę, żeby przyjrzeć się każdej drobnej zmianie. Ale nie chcę odświeżyć strony, ponieważ mam kilka animacji.

Czy jest coś, czego mogę użyć, aby moja witryna aktualizowała się automatycznie po aktualizacji CSS?
Może z JavaScript, jQuery, Ajax czy coś w tym stylu?


1
Możesz użyć zestawu narzędzi deweloperskich Chrome do testowania zmian w swojej witrynie w locie, a jeśli to działa, możesz dodać go do pliku .css ...
Mathlight

Cześć wszystkim. Teraz szukam tego samego, ale pod kątem zmian w plikach HTML! Ktoś?

@Karen, zadaj nowe pytanie, ponieważ wymagałoby to zupełnie innej odpowiedzi.
AMK

1
+1 za rekomendację @TWCrap. Robię to cały czas.
Parris

Odpowiedzi:


81

Tutaj jesteś: http://cssrefresh.frebsite.nl/

CSSrefresh to mały, nie przeszkadzający plik javascript, który monitoruje pliki CSS zawarte na Twojej stronie internetowej. Gdy tylko zapiszesz plik CSS, zmiany zostaną wprowadzone bezpośrednio, bez konieczności odświeżania przeglądarki.

Wystarczy wstawić plik javascript i działa!

Ale uwaga: działa tylko wtedy, gdy masz pliki na serwerze!


Edycja: LiveStyle

Jeśli tworzysz z Sublime Text i Google Chrome lub Apple Safari, powinieneś użyć Emmet LiveStyle . Jest to potężniejszy program przeładowujący CSS na żywo.
Teraz używam go zamiast CSS Refresh .

Jeśli chcesz uzyskać więcej informacji na temat tej niesamowitej wtyczki, przeczytaj post Smashing Magazine


8
to miłe, ale nie możesz zapomnieć o jego usunięciu przed wdrożeniem witryny w środowisku produkcyjnym, w przeciwnym razie narzucisz sporo niepotrzebnego obciążenia na serwer.
Bazzz

1
@dTDesign, Jeśli to jest prawidłowa odpowiedź, dlaczego jest nagroda?
AMK

Nie jestem tak długo na tym forum. Najpierw sprawdziłem, co to jest, i zdobywam odznakę. I nie zaznaczam tego, bo potrzebuje odpowiedzi, jego wyraźna przyczyna wymaga większej uwagi. Moja odpowiedź nie jest jedyną poprawną.
Michael Schmidt

@dTDesign powinien działać z eclipse? ponieważ już przetestowałem i wygląda na to, że nie działa lub muszę umieścić js na serwerze, a nie lokalnie?
mcmwhfy

2
@mcmwhfy: wstaw js PO css i działa tylko na serwerze. działa też z xampp lub czymś w tym rodzaju ...
Michael Schmidt

11

Z jQuery możesz stworzyć funkcję, która przeładowuje zewnętrzne arkusze stylów.

/**
 * Forces a reload of all stylesheets by appending a unique query string
 * to each stylesheet URL.
 */
function reloadStylesheets() {
    var queryString = '?reload=' + new Date().getTime();
    $('link[rel="stylesheet"]').each(function () {
        this.href = this.href.replace(/\?.*|$/, queryString);
    });
}

dzięki za odpowiedź najpierw wypróbowuję propozycję dTDesign, bo wyglądam trochę łatwiej, bo nie znam jquery ... ale jeszcze raz dziękuję

4

Zajrzyj na http://livereload.com/ .

Działa jako wtyczka do przeglądarki dla OS X i Windows. Podoba mi się to, ponieważ nie muszę osadzać dodatkowego javascript, który mógłbym przypadkowo zatwierdzić w mojej kontroli wersji.


4

Uważam, że wtyczki / rozszerzenia przeglądarki są najłatwiejszym rozwiązaniem. Nie wymagają żadnych zmian w kodzie poszczególnych witryn. I mogą być używane w dowolnej witrynie w sieci - co jest przydatne, jeśli zmodyfikuję coś w pamięci naprawdę szybko, aby ukryć pasek narzędzi lub tymczasowo naprawić błąd; kiedy skończyłem z tym grzebać, mogę nacisnąć klawisz i cały CSS wraca do normy.

Po zainstalowaniu (większość) przeładowanych wtyczek / rozszerzeń CSS nie wczytuje automatycznie ponownie CSS. Ale zwykle pracuj z czymś tak prostym, jak przycisk paska narzędzi, element menu kontekstowego i / lub proste naciśnięcie klawisza, aby ponownie załadować CSS. Uważam, że ta metoda i tak jest mniej podatna na błędy i jest znacznie mniej skomplikowana niż niektóre dostępne zautomatyzowane rozwiązania.

Kilka przykładów (możesz zaproponować inne):

Chrom:

  • tin.cr (zawiera automatyczne ponowne ładowanie i może utrwalać zmiany w plikach źródłowych w przeglądarce)
  • CSS Refresh

Firefox:




2

Firebug dla FireFox.

To wtyczka w dołączonym / oddzielnym oknie. Zmiany w HTML / CSS pojawiają się natychmiast, elementy są podświetlone.

Przewaga nad hackami JS polega na tym, że nie można tego przypadkowo skopiować do instancji produkcyjnej.



1

Nowy edytor kodu typu open source, nawiasy , ma funkcję Live Development, w której możesz edytować CSS w edytorze i zostanie to natychmiast odzwierciedlone w przeglądarce Chrome. Obecnie działa tylko do edycji CSS, ale edycja HTML już wkrótce!


1

Firebug dla Firefoksa to moja preferowana metoda: https://addons.mozilla.org/de/firefox/addon/firebug/ Możesz edytować HTML i CSS w locie, szybko dezaktywować reguły CSS (bez ich usuwania), dodawać lub usuwać HTML i tak dalej. Jeśli nie chcesz modyfikować swojego projektu, to Twój wybór. Możesz nawet zapisać zmiany w lokalnej kopii, ale rzadko używam tej funkcji.


0

Jeśli używasz przeglądarki Firefox, możesz zainstalować pasek narzędzi Web Developer Toolbar 1.2.2 z dodatku do przeglądarki Firefox, który ma opcję ponownego załadowania połączonych arkuszy stylów.


0

Spróbuj użyć pędzla CSS , wtyczki chrome do tworzenia CSS na żywo. Nie musisz pisać wszystkich CSS w edytorze tekstu, wracać do przeglądarki i ładować ją ponownie, raczej pisz CSS na żywo tak, jakbyś robił to w edytorze tekstu. Będziesz mieć więcej funkcji niż edytor tekstu, takich jak menu kontekstowe, użyj zduplikowanych właściwości, wybierz pełną ścieżkę CSS lub filtrowaną ścieżkę elementu bezpośrednio ze strony.


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.