Hướng dẫn how do i delete a property in css? - làm cách nào để xóa một thuộc tính trong css?

Câu trả lời nhanh là sử dụng "all:revert"

.element {
  all:revert;
}

all:revert sẽ đặt lại tất cả các thuộc tính kiểu trên phần tử của bạn trở lại Trình duyệt ban đầu Các giá trị thuộc tính bảng kiểu UA mặc định hoặc bất cứ thứ gì được tạo kiểu trong phần tử cơ thể cha. Nhưng nó sẽ không xóa các thuộc tính phong cách như initial, đưa chúng trở lại trạng thái hoàn toàn không có kiểu dáng. But it will not ERASE style properties like initial, returning them to a completely unstyled state.

Trong trường hợp các thuộc tính văn bản hoặc di truyền, "revert" đặt lại thuộc tính CSS của phần tử của bạn trở lại các giá trị được kế thừa của nó đến từ phần tử "cơ thể" của bạn hoặc giá trị kiểu UA mặc định của trình duyệt, không theo kiểu cơ sở của thuộc tính. Đối với một thuộc tính không được inher, nó đặt lại nó một lần nữa về bảng kiểu mặc định UA của trình duyệt và không theo kiểu cơ sở của thuộc tính. "Tất cả" cho phép tất cả các thuộc tính bị ảnh hưởng. Đây có thể là những gì bạn muốn xem.

Các vấn đề sử dụng "all:revert"

"all:revert" là một tuyên bố CSS mới hơn chỉ hoạt động trong các trình duyệt HTML5 hiện đại hơn (sau năm 2015), và thậm chí sau đó có sự hỗ trợ rất kém trong một số trình duyệt hiện đại như Internet Explorer 1-11, Edge Trident và một số trình duyệt di động. Không ai trong số các trình duyệt cũ, không phải HTML5 (trước năm 2010) sẽ hiểu tuyên bố này, vì vậy nó sẽ bị bỏ qua bởi một loạt các trình duyệt, cũ và mới. (Xem giải pháp CSS hỗn hợp của tôi ở bên dưới có các bản sửa lỗi cho Internet Explorer).

Các vấn đề sử dụng "initial" và "unset"

Bạn có thể sử dụng "initial" hoặc "unset" nhưng bạn phải áp dụng chúng theo cách thủ công cho từng thuộc tính và điều thậm chí còn tệ hơn, chúng sẽ không trả các thuộc tính cho các giá trị hiển thị mặc định của phần tử như được đặt bởi mỗi kiểu UA mặc định của trình duyệt, nhưng "initial" về cơ bản sẽ xóa Các giá trị thuộc tính của phần tử và tạo ra một yếu tố hoàn toàn không được định hướng. Ví dụ: "Hiển thị: khối" trên các phần tử cấp khối sẽ bị xóa. Bởi vì thuộc tính kiểu vẫn cần một giá trị mặc định của một số loại tất cả các phần tử cấp và không khối với "hiển thị" sẽ được thay đổi thành "Hiển thị: nội tuyến" khi bạn sử dụng "Hiển thị: ban đầu". Bạn không muốn làm điều này vì nó xóa các kiểu của bạn và các kiểu phần tử UA mặc định của trình duyệt hoàn toàn từ phần tử đã chọn."initial" will essentially erase the element's property values and create a completely unstyled element. For example, "display:block" on block level elements will be erased. Because the style property still needs a default value of some kind all block and non-block level elements with "display" will be changed to "display:inline" when you use "display:initial". You do not want to ever do this as it erases your styles AND the browser's default UA element styles from the selected element completely.

"unset" hoạt động gần giống nhau, nhưng trong trường hợp các thuộc tính CSS dựa trên văn bản được kế thừa của nó các thuộc tính của nó kế thừa bất cứ thứ gì trong cha mẹ trên phần tử (có thể là kiểu UA mặc định của trình duyệt hoặc bất cứ thứ gì trong cha mẹ HTML ở trên), nhưng đối với không -Các thuộc tính được tính năng hoạt động như "initial".

Đề xuất của tôi là tránh sử dụng

    :root, html {
        display: block;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        -webkit-text-size-adjust: inherit;
        -webkit-tap-highlight-color: inherit;
        all: revert;
    }
    
    html body {
        display: block;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        margin: inherit;
        padding: inherit;
        color: inherit;
        text-align: inherit;
        background-color: inherit;
        background: inherit;
        all: revert;
    }
    
    /* This rule attempts to manually reset all elements back to the 
    UA browser style sheet using "revert" and the "wildcard" (*)
    which resets all properties on all HTML elements.
    This would overwrite most of Bootstraps "reboot" styles
    on elements, for example.
    Note: This selector should be ignored by IE. */

    html body * {
        all: revert;
    }

5 hoặc bất kỳ hình thức nào của initial trong CSS trừ khi bạn đang cố gắng xóa một thuộc tính CSS riêng lẻ mà bạn không thể xóa theo bất kỳ cách nào khác. Tại sao? initial xóa không chỉ các kiểu bạn áp dụng mà tất cả các kiểu mà bảng kiểu UA mặc định được áp dụng. all:revert sẽ không làm điều này. Về mặt sử dụng initial, nó có hỗ trợ tốt hơn trong Internet Explorer, cũng như anh em họ của nó, "all:revert"0. Nhưng chỉ IE8+ hiểu initial. Vì vậy, có một loạt các vấn đề với giá trị tài sản này. Nó không đáng tin cậy.

Lý do CSS hoạt động theo cách này là tất cả các yếu tố HTML xuất hiện mà không có bất kỳ kiểu dáng nào cho đến khi trình duyệt áp dụng một biểu đồ kiểu người dùng mặc định cung cấp cho tất cả các yếu tố HTML một kiểu cơ bản. Tất cả các phần tử HTML thực sự không có kiểu và ngoài các yếu tố "thay thế" như textarea và các nút, trông giống nhau cho đến khi bảng UA mặc định của mỗi trình duyệt được áp dụng. "Ban đầu" và "Unset" sẽ xóa sạch hầu hết điều đó khỏi trình duyệt. "revert" ít nhất bảo tồn kiểu kiểu cơ bản của họ được áp dụng bởi trình duyệt của người dùng và do đó vượt trội so với "initial" và "unset". Bạn có thể xem lại tất cả các bảng kiểu mặc định khác nhau đi kèm với trình duyệt trong liên kết dưới đây.

Một danh sách các bảng kiểu trình duyệt mặc định: https://meiert.com/en/blog/user-agent-style-sheets/

Bây giờ cho một giải pháp thậm chí tốt hơn

Có hai ý tưởng ở đây bị nhầm lẫn:

1. Ý tưởng đầu tiên là về các kiểu "trả về" trở lại bộ giá trị bảng kiểu UA của trình duyệt (bảng kiểu đi kèm với trình duyệt khi cài đặt xác định mỗi phần tử trông như thế nào). Mỗi trình duyệt định nghĩa các kiểu riêng của nó về cách các yếu tố nên xem xét theo mặc định. Ý tưởng này là về việc trả lại tất cả các kiểu trang trở lại từng kiểu nguyên tố gốc của trình duyệt.
2. Ý tưởng thứ hai là về "đặt lại" tất cả các kiểu trình duyệt mặc định cho một giao diện chung và cảm thấy được chia sẻ bởi tất cả các trình duyệt. Mọi người xây dựng các tấm "thiết lập lại" đặc biệt để thử và sắp xếp tất cả các yếu tố trình duyệt theo một cách chung được thỏa thuận về phong cách, trên toàn cầu. Điều này không liên quan gì đến các kiểu UA mặc định của trình duyệt và nhiều hơn nữa về việc "làm sạch" và sắp xếp tất cả các trình duyệt theo kiểu cơ sở chung. Đây chỉ là một quá trình phụ gia.

Đó là hai khái niệm rất khác nhau mà mọi người ở đây rất khó hiểu.

Bởi vì mỗi trình duyệt thường có phần tử và kiểu bố cục mặc định, ngoài hộp trông hơi khác nhau, mọi người đã nảy ra ý tưởng về bảng kiểu "Đặt lại" hoặc "khởi động lại" để căn chỉnh tất cả các trình duyệt trước khi áp dụng CSS tùy chỉnh. Bootstrap bây giờ làm điều này, ví dụ. Nhưng điều đó không liên quan gì đến những người muốn trở lại với vẻ ngoài và cảm nhận mặc định của trình duyệt.

Vấn đề không phải là việc xây dựng các bảng kiểu "thiết lập lại" tùy chỉnh này, nó đang tìm ra CSS mặc định là gì cho mỗi trình duyệt và mỗi phần tử trước khi mọi kiểu được áp dụng. Hầu hết phát hiện ra bạn không thể xây dựng lại một tầng sạch hiện tại cho đến khi bạn "xóa" tất cả các kiểu đã được áp dụng. Nhưng làm thế nào để trở lại kiểu dáng của trình duyệt mặc định?

Đối với một số điều này có nghĩa là vượt ra ngoài việc trả lại các yếu tố cho bảng kiểu UA của trình duyệt đi kèm với trình duyệt. Nhiều người muốn thiết lập lại các giá trị thuộc tính "ban đầu" không liên quan gì đến kiểu mặc định của trình duyệt, nhưng thực sự là mặc định thuộc tính. Điều này rất nguy hiểm như trong trường hợp "Hiển thị" đẩy các yếu tố cấp khối trở lại "nội tuyến" và phá vỡ bố cục bảng và những thứ khác.

Vì vậy, tôi không đồng ý với người dùng ở đây bằng cách sử dụng "ban đầu" để đặt lại bất cứ điều gì hoặc các lớp đặt lại tùy chỉnh thay đổi mọi thuộc tính trở lại một số bộ giá trị cơ sở tùy ý.

Một giải pháp tốt hơn cho tôi luôn là cố gắng thử và trả lại tất cả các kiểu dáng phần tử cốt lõi trở lại các giá trị bảng kiểu UA của trình duyệt, đó là những gì tất cả người dùng cuối của chúng tôi đang sử dụng. Nếu bạn đang tạo một trang web mới, bạn không cần phải làm điều này. Bạn bắt đầu với các kiểu mặc định của trình duyệt và phong cách trên chúng. Chỉ sau khi bạn đã thêm các sản phẩm CSS của bên thứ ba hoặc thấy mình có các tầng CSS phức tạp, mà bạn muốn tìm ra cách quay lại các giá trị bảng kiểu mặc định của trình duyệt.return all core element styling back to the browser's UA style sheet values, which is what all our end-users are using anyway. If you are creating a new website, you don't have to do this. You start with the browser's default styles and style over them. Its only after you've added third-party CSS products, or found yourself with complicated CSS cascades, that you want to figure out how to return to the browser default style sheet values.

Vì lý do này, tôi đã tạo bảng "Đặt lại" của riêng bạn để đặt lại tất cả các yếu tố thành một phong cách chung trước tiên được chia sẻ bởi tất cả các trình duyệt cũ và mới là bước đầu tiên. Sau đó, bạn có một khung vững chắc dễ dàng trở lại mà không cần quay lại mặc định của trình duyệt. Bạn chỉ đơn giản là xây dựng trên một tập hợp cốt lõi chung của các giá trị kiểu phần tử. Sau khi xây dựng bảng "Đặt lại" của riêng bạn, một trang không thay đổi các kiểu UA của trình duyệt, bạn có một trang web rất dễ sửa đổi.I'm for creating your own "reset" sheet to reset all the elements to one common style first that's shared by all old and new browsers as a first step. You then have a solid framework that's much easier to revert to without going back to the browser defaults. You are simply building on a reset common core set of element style values. Once build your own "reset" sheet, one that ADDS not ALTERS the browsers UA styles, you have a site that's very easy to modify.

Vấn đề duy nhất còn lại sau đó là khi bạn có một trang web không có bảng thiết lập lại như vậy hoặc có CSS ​​bên thứ ba phức tạp đó và cần thử và quay lại các kiểu UA của trình duyệt. Làm thế nào để bạn làm điều đó?

Tôi nhận ra Internet Explorer đã buộc chúng tôi quá đặt lại mọi tài sản để quay lại bất kỳ loại thiết lập lại nào. Nhưng việc đẩy các giá trị thuộc tính đó trở lại "ban đầu" phá hủy hoàn toàn các giá trị bảng kiểu UA của trình duyệt! Ý tưởng tồi! Một cách tốt hơn là chỉ cần sử dụng "tất cả: hoàn nguyên" cho các trình duyệt không phải IE trên mọi yếu tố bằng cách sử dụng ký tự đại diện và "kế thừa" chỉ cho một số ít các thuộc tính cấp độ gốc được tìm thấy trong các yếu tố "HTML" và "cơ thể" mà các yếu tố mà cơ thể "mà các phần tử mà cơ thể mà mà cơ thể" mà các phần ảnh hưởng đến tất cả trẻ em thừa kế trong trang. (xem bên dưới). Tôi không dành cho các thiết lập lại các thuộc tính khổng lồ này bằng cách sử dụng "ban đầu" hoặc quay trở lại một số tiêu chuẩn tưởng tượng, chúng tôi cho rằng tất cả các trình duyệt hoặc IE sẽ sử dụng. Đối với người mới bắt đầu "ban đầu" có sự hỗ trợ kém trong IE và không đặt lại các giá trị về mặc định phần tử, chỉ có mặc định thuộc tính. Nhưng nó cũng vô nghĩa nếu bạn sẽ tạo một bảng thiết lập lại để sắp xếp tất cả các yếu tố theo phong cách chung. Trong trường hợp đó, nó vô nghĩa để xóa các phong cách và bắt đầu lại.

Vì vậy, đây là giải pháp đơn giản của tôi mà trong hầu hết các trường hợp thực hiện đủ để thiết lập lại những giá trị dựa trên văn bản sẽ vào IE từ gốc và sử dụng "Tất cả: hoàn nguyên" cho tất cả các trình duyệt không phải IE Phong cách hoàn toàn, cung cấp cho bạn một khởi động lại thực sự. Điều này không can thiệp vào các lớp và kiểu cấp cao hơn được xếp lớp trên các kiểu phần tử của bạn, dù sao cũng phải luôn là mục tiêu. Đó là lý do tại sao tôi không dành cho các lớp đặt lại tùy chỉnh này, tẻ nhạt và không cần thiết và dù sao cũng không trả lại phần tử cho kiểu UA của trình duyệt. Lưu ý các bộ chọn chọn lọc hơn một chút bên dưới sẽ viết qua, ví dụ, các giá trị kiểu "khởi động lại" của Bootstrap, đưa chúng trở lại các kiểu mặc định của trình duyệt. Tất nhiên, những thứ này sẽ không đặt lại các kiểu phần tử trên các phần tử cho IE, nhưng đối với các trình duyệt không phải IE IE và kiểu dáng văn bản di truyền nhất, nó sẽ trả lại các yếu tố trong hầu hết các tác nhân cho các bảng kiểu UA đi kèm với trình duyệt:

    :root, html {
        display: block;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        -webkit-text-size-adjust: inherit;
        -webkit-tap-highlight-color: inherit;
        all: revert;
    }
    
    html body {
        display: block;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        margin: inherit;
        padding: inherit;
        color: inherit;
        text-align: inherit;
        background-color: inherit;
        background: inherit;
        all: revert;
    }
    
    /* This rule attempts to manually reset all elements back to the 
    UA browser style sheet using "revert" and the "wildcard" (*)
    which resets all properties on all HTML elements.
    This would overwrite most of Bootstraps "reboot" styles
    on elements, for example.
    Note: This selector should be ignored by IE. */

    html body * {
        all: revert;
    }

Bạn cũng có thể sử dụng Khung CSS Universal MIỄN PHÍ của tôi, trong đó thực hiện hoàn nguyên trong các bảng kiểu đặt lại của nó.

Làm thế nào để bạn xóa một phong cách trong CSS?

Chúng ta có thể thay đổi thuộc tính CSS không?

Thuộc tính CSS nào được sử dụng để xóa tất cả các thuộc tính của phần tử đã chọn?

Làm thế nào để bạn đặt lại CSS?