Cách xem trước CSS trong trình duyệt

Tôi muốn tìm hiểu làm thế nào tôi có thể kiểm tra css in của mình giống như khi tôi kiểm tra các phần tử của mình bằng css bình thường và tôi đã tìm kiếm tất cả các plugin và những thứ như vậy

Giống như khi bạn xem trước bản in bằng chrome nhưng nơi bạn có thể kiểm tra các thành phần

@media print {
   p{color:red;}
   .... my css
}
.sharebar {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 195;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

Giả sử bạn đang mã hóa HTML trong Sublime Text và bạn muốn kiểm tra xem nó trông như thế nào trong trình duyệt. Một số trình soạn thảo văn bản (chẳng hạn như BBEdit) có tính năng cho phép bạn mở trang của mình trong trình duyệt, nhưng Sublime Text thì không. Đây là cách thực hiện trong Sublime Text

Cài đặt công cụ chọn trình duyệt

Vì bạn là nhà phát triển web nên bạn sẽ (a) có nhiều trình duyệt web trên máy tính của mình và (b) muốn thử nghiệm công việc của mình trên nhiều trình duyệt. Để làm cho cuộc sống của bạn dễ dàng hơn, bạn cần cài đặt một công cụ lựa chọn trình duyệt. Trong cuốn sách của tôi, Mac OS X Snow Leopard for Power Users, tôi đã giải thích nó theo cách này

Tôi luôn sử dụng một số trình duyệt web trên máy Mac của mình và tôi muốn chuyển đổi qua lại giữa chúng. Trên thực tế, đôi khi tôi nhấp vào một liên kết và muốn mở nó trong Safari, vì tôi muốn in trang đó và tôi thấy Safari làm điều đó tốt hơn bất kỳ trình duyệt nào khác, nhưng một vài phút sau tôi lại nhấp vào một liên kết. . Trong Mac OS X, cũng như trong Windows và Linux, tôi có thể chỉ định trình duyệt mặc định cho hệ thống của mình, nhưng trình duyệt đó được sử dụng cho mọi thứ. Sẽ không hay sao nếu tôi có thể chọn giữa các trình duyệt một cách nhanh chóng, khi cần?

Với một công cụ lựa chọn trình duyệt, bạn có thể. Dưới đây là khuyến nghị của tôi

• hệ điều hành Mac. Tôi đã từng rất yêu Choosy, nhưng kể từ Mountain Lion, nó đã tan vỡ. Vì vậy, bây giờ tôi sử dụng MultiBrowser. Nó không mượt bằng, nhưng nó hoạt động với Mountain Lion và miễn phí (mặc dù tôi rất vui khi trả 12 đô la cho Choosy)
• các cửa sổ. Tôi chưa bao giờ sử dụng nó, nhưng có vẻ như bạn muốn Trình chọn trình duyệt

Cài đặt chúng, định cấu hình chúng để nhận dạng trình duyệt web trên máy tính của bạn (Firefox, Chrome, Opera, Safari và IE nếu bạn sử dụng Windows) và đặt chúng làm trình duyệt web mặc định trên máy tính của bạn. Cách bạn làm điều đó phụ thuộc vào hệ điều hành của bạn

• hệ điều hành Mac. Mở Safari và sau đó chọn Safari > Tùy chọn > Chung. Đối với Trình duyệt web mặc định, chọn MultiBrowser
• các cửa sổ. Nhấp vào menu Bắt đầu (hoặc tương đương) và nhập Set Your Default Programs vào hộp tìm kiếm. Trong cửa sổ kết quả, chọn Trình chọn trình duyệt và sau đó nhấp vào Đặt chương trình này làm mặc định

Phương pháp 1. Cài đặt plugin View In Browser

Đây là phương pháp đơn giản nhất, nhưng tôi không thể làm cho nó hoạt động trên máy Mac của mình. Lưu ý rằng tôi cho rằng bạn đã cài đặt tiện ích mở rộng Kiểm soát gói cho Văn bản tuyệt vời

1. Nhấn Command-Shift-P (nếu bạn sử dụng máy Mac) & Ctrl-Shift-P (nếu bạn sử dụng Windows) để mở Bảng lệnh

2. Nhập Install Package cho đến khi bạn thấy "Kiểm soát gói. Cài đặt gói" được chọn. nhấn nút Enter

3. Trong hộp văn bản, bắt đầu nhập View In Browser cho đến khi gói đó được chọn. Khi đã có, hãy nhấn Enter để cài đặt nó

4. Khởi động lại văn bản tuyệt vời

Giờ đây, khi bạn mở một trang web trong Sublime Text, chỉ cần nhấn Ctrl-Alt-V và công cụ lựa chọn trình duyệt của bạn sẽ mở ra, cho phép bạn chọn trình duyệt nào sẽ mở

Bạn có thể đọc thêm về gói View In Browser tại GitHub

Phương pháp 2. Tạo một hệ thống xây dựng

Đây là công việc nhiều hơn một chút, nhưng bạn cũng có nhiều quyền kiểm soát hơn

1. Trong Sublime Text, vào Tools > Build System > New Build System. Một tab mới sẽ mở trong Sublime Text có tên là untitled.sublime-build, với văn bản sau trong đó1

   {
       "cmd": ["make"]
   }
   

2. Nếu bạn sử dụng máy Mac, hãy thay thế nó bằng cách sau

   {
       "cmd": ["open", "-a", "/Applications/MultiBrowser.app", "$file"]
   }
   

   Nếu bạn sử dụng Windows, hãy thay thế nó bằng cách sau

   {
       "cmd": ["C:\Program Files\", "$file"]
   }
   

3. Lưu các tập tin. Đặt tên cho nó là Choose Browser.sublime-build. Sublime Text phải đủ thông minh để đặt nó vào đúng vị trí dành cho bạn, nhưng nếu không, hãy lưu nó vào các vị trí sau

   • hệ điều hành Mac.

     {
         "cmd": ["make"]
     }
     

     0
   • các cửa sổ

4. Khởi động lại văn bản tuyệt vời

Bây giờ, khi bạn muốn xem trước tác phẩm của mình trong Sublime Text trên trình duyệt web, hãy thực hiện một trong các thao tác sau

• Công cụ > Xây dựng
• Nhấn Command-B (Mac)2 hoặc Ctrl-B (Windows)

Công cụ lựa chọn trình duyệt của bạn sẽ mở ra, cho phép chọn trình duyệt mà bạn muốn xem trang web của mình

Bạn có thể tìm hiểu thêm về Build Systems trên Sublime Text tại http. //www. văn bản tuyệt vời. com/docs/xây dựng

1. Cảm ơn giàu B. vì đã cho tôi biết rằng tôi cần thay đổi

   {
       "cmd": ["make"]
   }
   

   1 thành

   {
       "cmd": ["open", "-a", "/Applications/MultiBrowser.app", "$file"]
   }
   

   0. ↩

2. Đây là một lệnh phím rất tệ, vì Command-B luôn được sử dụng cho Bold trên Mac (và tương tự như vậy với Ctrl-B trên Windows). Nếu lệnh chính không phù hợp với bạn, bạn sẽ cần thay đổi nó (đó là chủ đề của bài học khác) hoặc sử dụng menu. ↩