Tôi đã tạo một trang bằng CSS. Bây giờ tôi phải thay đổi từ trình chỉnh sửa sang trình duyệt của mình và làm mới toàn bộ trang, chỉ để xem từng thay đổi nhỏ. Nhưng tôi không muốn làm mới trang, vì tôi có một số hình ảnh động.
Vì vậy, có bất kỳ thứ gì tôi có thể sử dụng mà trang web của tôi tự động cập nhật sau khi cập nhật CSS không?
Có thể với JavaScript, jQuery, Ajax hoặc gì đó?
Câu trả lời:
Của bạn đây: http://cssrefresh.frebsite.nl/
CSSrefresh là một tệp javascript nhỏ, đơn giản, giám sát các tệp CSS có trong trang web của bạn. Ngay sau khi bạn lưu tệp CSS, các thay đổi sẽ được triển khai trực tiếp mà không cần phải làm mới trình duyệt của bạn.
Chỉ cần chèn tệp javascript và nó hoạt động!
Nhưng lưu ý: Nó chỉ hoạt động khi bạn có tệp trên máy chủ!
Nếu bạn phát triển với Sublime Text và Google Chrome hoặc Apple Safari, thì bạn nên sử dụng Emmet LiveStyle . Đây là một Trình tải lại CSS trực tiếp mạnh mẽ hơn.
Bây giờ tôi sử dụng nó thay vì CSS Refresh .
Nếu bạn muốn biết thêm thông tin về plugin tuyệt vời này, vui lòng đọc Bài đăng của Tạp chí Smashing
Với jQuery, bạn có thể tạo một hàm tải lại các bảng định kiểu bên ngoài.
/**
* 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);
});
}
Hãy xem tại http://livereload.com/ .
Nó hoạt động như một plugin trình duyệt cho OS X và windows. Tôi thích nó vì tôi không phải nhúng thêm javascript mà tôi có thể vô tình phạm phải trong kiểm soát phiên bản của mình.
Tôi thấy plugin / tiện ích mở rộng của trình duyệt là giải pháp dễ dàng nhất. Họ không yêu cầu bất kỳ thay đổi mã nào cho các trang web riêng lẻ của bạn. Và chúng có thể được sử dụng cho bất kỳ trang nào trên web - điều này rất hữu ích nếu tôi sửa đổi thứ gì đó trong bộ nhớ thực sự nhanh chóng để ẩn thanh công cụ hoặc sửa lỗi tạm thời; sau khi hoàn thành việc tạo nội dung với nó, tôi có thể nhấn một phím và tất cả CSS trở lại bình thường.
Sau khi được cài đặt, (hầu hết) các plugin / tiện ích mở rộng CSS được tải lại sẽ không tự động tải lại CSS. Nhưng thường làm việc với những thứ đơn giản như nút trên thanh công cụ, mục menu ngữ cảnh và / hoặc một phím bấm đơn giản để tải lại CSS. Tôi thấy phương pháp này ít bị lỗi hơn và cũng ít phức tạp hơn nhiều so với một số giải pháp tự động hiện có.
Một số ví dụ (vui lòng đề xuất một số ví dụ khác):
Trình duyệt Chrome:
Firefox:
Đây là Dự án nhỏ của tôi. Vui lòng dùng thử
CSS Tự động tải lại trên Github
Có, bạn có thể thao tác CSSqua jQuery:
$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
Bạn cũng có thể sử dụng toggleClass phương pháp này.
Firebug cho FireFox.
Đó là một plugin trong một cửa sổ đính kèm / riêng biệt. Các thay đổi đối với HTML / CSS xuất hiện ngay lập tức, các phần tử được đánh dấu.
Lợi thế so với hack JS là bạn không thể vô tình sao chép nó vào phiên bản sản xuất của mình.
Bạn đang tìm Tải lại trực tiếp:
Nó có sẵn dưới dạng tiện ích mở rộng trình duyệt và dễ triển khai
Trình chỉnh sửa mã nguồn mở mới, ngoặc , có tính năng Phát triển Trực tiếp , nơi bạn có thể chỉnh sửa CSS trong trình chỉnh sửa và nó sẽ ngay lập tức được phản ánh trong trình duyệt chrome. Nó hiện chỉ hoạt động để chỉnh sửa CSS, nhưng chỉnh sửa HTML sẽ sớm ra mắt!
Firebug cho Firefox là phương pháp ưa thích của tôi: https://addons.mozilla.org/de/firefox/addon/firebug/ Bạn có thể chỉnh sửa HTML và CSS ngay lập tức, nhanh chóng hủy kích hoạt các quy tắc CSS (mà không cần xóa chúng), thêm hoặc xóa HTML và như thế. Nếu bạn không muốn điều chỉnh thiết kế của mình thì đây là lựa chọn của bạn. Bạn thậm chí có thể lưu các thay đổi vào một bản sao cục bộ, nhưng tôi hiếm khi sử dụng tính năng đó.
Hãy thử sử dụng CSS Brush , một plugin chrome để tạo CSS trực tiếp. Bạn không cần phải viết tất cả CSS trong trình soạn thảo văn bản, hãy quay lại trình duyệt và tải lại nó, thay vì viết CSS trực tiếp như thể bạn đang thực hiện trong trình soạn thảo văn bản. Bạn sẽ có nhiều tính năng hơn so với một trình soạn thảo văn bản ở đây như trình đơn theo ngữ cảnh, sử dụng các thuộc tính trùng lặp, chọn đường dẫn CSS hoàn chỉnh hoặc đường dẫn được lọc của một phần tử trực tiếp từ trang.