Zaktualizuj CSS witryny bez odświeżania strony

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?

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

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);
    });
}

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.

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:

• CSS ponownie załadowany
• CSS Refresh

Oto mój mały projekt. Spróbuj
ponownie załadować CSS Auto na Github

Tak, możesz manipulować CSSprzez jQuery:

$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );

Możesz również użyć tej toggleClassmetody.

http://api.jquery.com/toggleClass/

http://jqueryui.com/demos/switchClass/

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.

Szukasz usługi Live Reload:

Jest dostępne jako rozszerzenie przeglądarki i łatwe do wdrożenia

http://livereload.com/

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!

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.

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.

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.

To może pomóc -> chaicode

Jest to działający na żywo edytor CSS, JavaScript i HTML, który jest open source i wip. github