Actualizar el CSS de un sitio web sin actualizar la página

Creé una página con CSS. Ahora debo cambiar de mi editor a mi navegador y actualizar la página completa, solo para ver cada pequeño cambio. Pero no quiero actualizar la página, porque tengo algunas animaciones.

Entonces, ¿hay algo que pueda usar para que mi sitio se actualice automáticamente después de una actualización de CSS?
¿Quizás con JavaScript, jQuery, Ajax o algo así?

Aquí está: http://cssrefresh.frebsite.nl/

CSSrefresh es un archivo javascript pequeño y no obstructivo que monitorea los archivos CSS incluidos en su página web. Tan pronto como guarde un archivo CSS, los cambios se implementan directamente, sin tener que actualizar su navegador.

¡Simplemente inserte el archivo javascript y funciona!

Pero nota: ¡solo funciona cuando tienes los archivos en un servidor!

Editar: LiveStyle

Si desarrolla con Sublime Text y Google Chrome o Apple Safari, entonces debería usar Emmet LiveStyle . Este es un Live CSS-Reloader más poderoso.
Ahora lo uso en lugar de CSS Refresh .

Si desea obtener más información sobre este increíble complemento, lea la publicación de Smashing Magazine

Con jQuery puede crear una función que recargue hojas de estilo externas.

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

Eche un vistazo a http://livereload.com/ .

Funciona como un complemento de navegador para OS X y Windows. Me gusta porque no tengo que incrustar javascript adicional que podría confirmar accidentalmente en mi control de versiones.

Creo que los complementos / extensiones del navegador son la solución más fácil. No requieren ningún cambio de código en sus sitios individuales. Y se pueden usar para cualquier sitio en la web, lo cual es útil si modifico algo en la memoria muy rápido para ocultar una barra de herramientas o corregir un error temporalmente; Una vez que terminé de limpiarlo, puedo presionar una tecla y todo el CSS vuelve a la normalidad.

Una vez instalados, (la mayoría) de los complementos / extensiones recargados de CSS no recargan el CSS automáticamente. Pero por lo general, trabaje con algo tan simple como un botón de la barra de herramientas, un elemento del menú contextual y / o una simple pulsación de tecla para volver a cargar el CSS. De todos modos, encuentro que este método es menos propenso a errores y es mucho menos complicado que algunas de las soluciones automatizadas que existen.

Algunos ejemplos (siéntase libre de sugerir algunos otros):

Cromo:

• tin.cr (incluye recarga automática y puede conservar los cambios del navegador en los archivos de origen)
• Actualización CSS

Firefox:

• CSS recargado
• Actualización CSS

Aquí está mi pequeño proyecto. Por favor, darle una oportunidad
de recarga automática CSS en Github

Sí, puedes manipular la CSSvía jQuery:

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

También puedes usar el toggleClassmétodo.

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

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

Firebug para FireFox.

Es un complemento en una ventana adjunta / separada. Los cambios en HTML / CSS aparecen instantáneamente, los elementos se resaltan.

La ventaja sobre los hacks de JS es que no puede copiar esto accidentalmente a su instancia de producción.

Está buscando Live Reload:

Está disponible como una extensión del navegador y es fácil de implementar.

http://livereload.com/

El nuevo editor de código de fuente abierta, corchetes , tiene una función de desarrollo en vivo donde puede editar CSS en el editor y se reflejará inmediatamente en el navegador Chrome. Actualmente solo funciona para la edición de CSS, ¡pero la edición de HTML llegará pronto!

Firebug para Firefox es mi método preferido: https://addons.mozilla.org/de/firefox/addon/firebug/ Puede editar HTML y CSS sobre la marcha, desactivar rápidamente las reglas CSS (sin eliminarlas), agregar o eliminar HTML y así. Si no desea modificar su diseño, esta es su elección. Incluso puede guardar los cambios en una copia local, pero casi nunca uso esa función.

Si está utilizando Firefox, puede instalar Web Developer Toolbar 1.2.2 desde el complemento de Firefox, que tiene la opción de recargar hojas de estilo vinculadas.

Intente usar CSS Brush , un complemento de Chrome para crear CSS en vivo. No es necesario que escriba todo el CSS en un editor de texto, vuelva al navegador y vuelva a cargarlo, sino que escriba el CSS en vivo como si lo estuviera haciendo en un editor de texto. Tendrá más funciones que un editor de texto aquí, como menú sensible al contexto, use propiedades duplicadas, seleccione la ruta CSS completa o una ruta filtrada de un elemento directamente desde la página.

Esto podría ayudar -> chaicode

Es un editor de CSS, Javascript y HTML en vivo que es de código abierto y un wip. github