Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Nén Css để tăng tốc và hạ tải cho blog/website

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi TrollVL, 29/11/13.

Lượt xem: 4,965

  1. TrollVL Thành viên cấp 2

    Tại sao cần nén mã CSS?
    CSS là một ngôn ngữ khá cơ bản và thiết yếu trong thiết kế web. Tổ hợp CSS trong toàn bộ một trang web ảnh hưởng lớn đến tốc độ hạ tải trang web đó. Nếu CSS nặng thì sẽ gây tốn nhiều thời gian cho việc tải trang web và ngược lại. Chính vì vậy việc nén mã CSS sẽ giúp tăng tốc độ hạ tải trang web.
    [​IMG]
    Thay vì phải viết nhiều dòng để định dạng các thuộc tính, bạn thử tận dụng tính năng tốc kí của CSS, tức là ta gộp các dòng liên quan lại thành một dòng duy nhất.
    Ví dụ:
    • Đối với dòng mã CSS:
    Code:
    #sidebar h1 {padding-top:3px;
    padding-right:0;
    padding-bottom:3px;
    padding-left:3px; }
    • Nên rút ngắn lại thành như sau:
    Code:
    #sidebar h1 {padding:3px 0 3px 3px;} 
    • Ngoài ra có thể loại bỏ các chú thích (comments) và các khoảng trống để tinh giản CSS.
    Để cho công việc đơn giản hơn trong quá trình thực hiện bạn cũng có thể sử dụng công cụ sau để nén CSS một cách nhanh chóng

    ...
  2. banbaonylong

    banbaonylong Ko phải assmin

    mình khuyên bạn nào viết CSS thì sử dụng công cụ Firebug của Firefox, viết trực wan, hỗ trợ auto-complete cực mạnh và tự nén, viết xong copy vào file css luôn :)
    Nguyễn Tất ThắngTrollVL thích bài viết này.
  3. việt ptit

    việt ptit Thành viên cấp 3

    Mình hoàn toàn đồng ý về việc dùng cách viết rút gọn của css như bạn nói trong ví dụ trên
    Nhưng còn về việc dùng cái công cụ (ở trong cái link bạn đưa) thì mình thấy (ý kiến cá nhân) là không nên vì thực ra công cụ đó nó tìm trong chuỗi mình nhập vào kí tự "}" và tự động ngắt dòng ngay sau kí tự đó + với việc loại bỏ các dấu cách sau dấu ":" và loại bỏ các dấu ngắt dòng sau dấu ";" như thế sẽ rất khó nếu phải sửa code css sau này. Ví dụ:
    Ban đầu:
    #header h2 {
    margin:0px;
    font-family: verdana, arial, sans-serif;
    font-size: 14px;
    color:#B1C6EB;
    letter-spacing: 1px;
    }

    sau khi sử dụng công cụ nén css:
    #header h2{margin:0;font-family:verdana,arial,sans-serif;font-size:14px;color:#B1C6EB;letter-spacing:1px}
  4. Vũ Quang Thịnh

    Vũ Quang Thịnh Mới đăng kí

    có thể dùng prettify css để thêm tab cho nó :3
    1.đi từ cái chung đến cái riêng
    2.tận dụng viết tắt
  5. TrollVL

    TrollVL Thành viên cấp 2

    banbaonylong: cách này của bạn rất hay này :like:
    việt ptit: Thì tác dụng chính của nó là thu gọn như vậy để nén dung lượng của CSS mà bạn. Tuy nhiên nếu sử dụng chức năng siêu nén (nén toàn bộ CSS thành 1 dòng thì đúng là không nên thật)
  6. nguyenhuuhung_dn

    nguyenhuuhung_dn Thành viên cấp 1

    Neu su dung vbb hoac xenforo.Se co option o admincp de he thong tu Nen css giup ban luon.
  7. maitinhvi

    maitinhvi Thành viên cấp 1

    :like: Cái này rất hay
  8. maitinhvi

    maitinhvi Thành viên cấp 1

    Khi nén như vậy thì tốc độ load trang có nhanh hơn không?
  9. TrollVL

    TrollVL Thành viên cấp 2

    @maitinh tất nhiên nhẹ hơn nên nhanh hơn chứ bạn
  10. Lâm Hiếu

    Lâm Hiếu Mới đăng kí

    Theo mình thì nên tự rút gọn khi viết thì tốt hơn dùng tools :D
    Đảm bảo nữa :)
  11. giayvun

    giayvun Thành viên cấp 1

    Dùng sublimeText có nhiều plugin hỗ trợ rất mạnh cho mảng css, html này. Viết đẹp đẽ bình thường sau đó rút tất cả về 1 dòng để nén, có chức năng bung ra lại, để chỉnh sửa :D, code theo kiểu gõ tắt (zend-coding) rất nhanh.
  12. fantazyhp7

    fantazyhp7 Mới đăng kí

    mình toàn viết trên SharePoint Designer 2007. viết nhiều nó quen,chả muốn chuyển qua cái khác

Ủng hộ diễn đàn