From 427f02a05ef407f777250db7eb165b376192c138 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Wed, 9 Oct 2024 23:33:44 +0200 Subject: [PATCH 1/6] css: Document no auto-appending `px` in jQuery 4.0 Also, document the removal of `jQuery.cssNumber` in jQuery 4.0. --- entries/css.xml | 5 ++++- entries/jQuery.cssNumber.xml | 23 ++++------------------- 2 files changed, 8 insertions(+), 20 deletions(-) diff --git a/entries/css.xml b/entries/css.xml index 7d6bd56e..a5b17f2d 100644 --- a/entries/css.xml +++ b/entries/css.xml @@ -108,6 +108,7 @@ $( "div" ).on( "click", function() { + @@ -146,7 +147,8 @@ $( "div" ).on( "click", function() {

As with the .prop() method, the .css() method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single object of key-value pairs.

Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) and .css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }). Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.

-

When a number is passed as the value, jQuery will convert it to a string and add px to the end of that string. If the property requires units other than px, convert the value to a string and add the appropriate units before calling the method.

+

In jQuery 3.x or older, when a number is passed as the value, jQuery will convert it to a string and add px to the end of that string. There's one exception: px is not added to keys of jQuery.cssNumber If the property requires units other than px, convert the value to a string and add the appropriate units before calling the method.

+

In jQuery 4.0 or newer, when a number is passed as the value, jQuery will only convert it to a string and add px to the end of that string for a limited set of properties - mostly related to width, height, border, margin & padding.

When using .css() as a setter, jQuery modifies the element's style property. For example, $( "#mydiv" ).css( "color", "green" ) is equivalent to document.getElementById( "mydiv" ).style.color = "green". Setting the value of a style property to an empty string — e.g. $( "#mydiv" ).css( "color", "" ) — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. As a consequence, the element's style for that property will be restored to whatever value was applied. So, this method can be used to cancel any style modification you have previously performed. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or <style> element. Warning: one notable exception is that, for IE 8 and below, removing a shorthand property such as border or background will remove that style entirely from the element, regardless of what is set in a stylesheet or <style> element.

Note: .css() doesn't support !important declarations. So, the statement $( "p" ).css( "color", "red !important" ) does not turn the color of all paragraphs in the page to red as of jQuery 3.6.0. Do not depend on that not working, though, as a future version of jQuery may add support for such declarations. It's strongly advised to use classes instead; otherwise use a jQuery plugin.

As of jQuery 1.8, the .css() setter will automatically take care of prefixing the property name. For example, take .css( "user-select", "none" ) in Chrome/Safari will set it as -webkit-user-select, Firefox will use -moz-user-select, and IE10 will use -ms-user-select.

@@ -286,5 +288,6 @@ $( "div" ).on( "click", function() { + diff --git a/entries/jQuery.cssNumber.xml b/entries/jQuery.cssNumber.xml index ce5af886..60d9cc84 100644 --- a/entries/jQuery.cssNumber.xml +++ b/entries/jQuery.cssNumber.xml @@ -1,31 +1,16 @@ - + jQuery.cssNumber 1.4.3 - An object containing all CSS properties that may be used without a unit. The .css() method uses this object to see if it may append px to unitless values. + An object containing all CSS properties that may be used without a unit. Prior to jQuery 4.0, the .css() method uses this object to see if it may append px to unitless values. -

You can think about jQuery.cssNumber as a list of all CSS properties you might use without a unit. It's used by .css() to determine if it needs to add px to unitless values.

-

The keys of the jQuery.cssNumber object are camel-cased and the values are all set to true. If you want to prevent the .css() method from automatically adding the px unit for a specific CSS property, you can add an extra property to the jQuery.cssNumber object.

+

You can think about jQuery.cssNumber as a list of all CSS properties you might use without a unit. Prior to jQuery 4.0, it was used by .css() to determine if it needs to add px to unitless values.

+

The keys of the jQuery.cssNumber object are camel-cased and the values are all set to true. If you want to prevent the .css() method from automatically adding the px unit for a specific CSS property and that property is not yet a key of the jQuery.cssNumber object, you can add such an extra property:


 jQuery.cssNumber.someCSSProp = true;
-

By default the object contains the following properties:

-
    -
  • zIndex
    • -
  • fontWeight
    • -
  • opacity
    • -
  • zoom
    • -
  • lineHeight
    • -
  • widows (added in jQuery 1.6)
    • -
  • orphans (added in jQuery 1.6)
    • -
  • fillOpacity (added in jQuery 1.6.2)
    • -
  • columnCount (added in jQuery 1.9)
    • -
  • order (added in jQuery 1.10.2)
    • -
  • flexGrow (added in jQuery 1.11.1)
    • -
  • flexShrink (added in jQuery 1.11.1)
    • -
From db431f4b2e967f52a15ace9adaf8a3934de85ed5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Mon, 17 Mar 2025 13:50:07 +0100 Subject: [PATCH 2/6] fixup! css: Document no auto-appending `px` in jQuery 4.0 --- entries/css.xml | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/entries/css.xml b/entries/css.xml index a5b17f2d..c6bf7704 100644 --- a/entries/css.xml +++ b/entries/css.xml @@ -148,7 +148,14 @@ $( "div" ).on( "click", function() {

As with the .prop() method, the .css() method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single object of key-value pairs.

Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) and .css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }). Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.

In jQuery 3.x or older, when a number is passed as the value, jQuery will convert it to a string and add px to the end of that string. There's one exception: px is not added to keys of jQuery.cssNumber If the property requires units other than px, convert the value to a string and add the appropriate units before calling the method.

-

In jQuery 4.0 or newer, when a number is passed as the value, jQuery will only convert it to a string and add px to the end of that string for a limited set of properties - mostly related to width, height, border, margin & padding.

+

In jQuery 4.0 or newer, when a number is passed as the value, jQuery will only convert it to a string and add px to the end of that string for a limited set of properties - mostly related to width, height, border, margin & padding; the full list:

+
    +
  • setting the element position: top, right, bottom, left
    • +
  • setting the element dimensions: width, height, min-width, min-height, max-width, max-height
    • +
  • padding-related: padding, padding-top, padding-right, padding-bottom, padding-left
    • +
  • margin-related: margin, margin-top, margin-right, margin-bottom, margin-left
    • +
  • border-related: border, border-width, border-top, border-top-width, border-right, border-right-width, border-bottom, border-bottom-width, border-left, border-left-width
    • +

When using .css() as a setter, jQuery modifies the element's style property. For example, $( "#mydiv" ).css( "color", "green" ) is equivalent to document.getElementById( "mydiv" ).style.color = "green". Setting the value of a style property to an empty string — e.g. $( "#mydiv" ).css( "color", "" ) — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. As a consequence, the element's style for that property will be restored to whatever value was applied. So, this method can be used to cancel any style modification you have previously performed. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or <style> element. Warning: one notable exception is that, for IE 8 and below, removing a shorthand property such as border or background will remove that style entirely from the element, regardless of what is set in a stylesheet or <style> element.

Note: .css() doesn't support !important declarations. So, the statement $( "p" ).css( "color", "red !important" ) does not turn the color of all paragraphs in the page to red as of jQuery 3.6.0. Do not depend on that not working, though, as a future version of jQuery may add support for such declarations. It's strongly advised to use classes instead; otherwise use a jQuery plugin.

As of jQuery 1.8, the .css() setter will automatically take care of prefixing the property name. For example, take .css( "user-select", "none" ) in Chrome/Safari will set it as -webkit-user-select, Firefox will use -moz-user-select, and IE10 will use -ms-user-select.

From 07245fc590f360a7898f68684f7a930c6a5109ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82=C4=99biowski-Owczarek?= Date: Mon, 17 Mar 2025 17:28:01 +0100 Subject: [PATCH 3/6] Update entries/css.xml Co-authored-by: Timmy Willison --- entries/css.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/entries/css.xml b/entries/css.xml index c6bf7704..85a304e8 100644 --- a/entries/css.xml +++ b/entries/css.xml @@ -147,7 +147,7 @@ $( "div" ).on( "click", function() {

As with the .prop() method, the .css() method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single object of key-value pairs.

Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) and .css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }). Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.

-

In jQuery 3.x or older, when a number is passed as the value, jQuery will convert it to a string and add px to the end of that string. There's one exception: px is not added to keys of jQuery.cssNumber If the property requires units other than px, convert the value to a string and add the appropriate units before calling the method.

+

In jQuery 3.x or older, when a number is passed as the value, jQuery will convert it to a string and add px to the end of that string. However, there are exceptions. px is not added to keys of jQuery.cssNumber If the property requires units other than px, convert the value to a string and add the appropriate units before calling the method.

In jQuery 4.0 or newer, when a number is passed as the value, jQuery will only convert it to a string and add px to the end of that string for a limited set of properties - mostly related to width, height, border, margin & padding; the full list:

  • setting the element position: top, right, bottom, left
    • From ba689199ee19449d39b6bce38e764babcef77004 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Mon, 17 Mar 2025 17:31:17 +0100 Subject: [PATCH 4/6] jQuery.cssNumber: Add a deprecation note --- entries/jQuery.cssNumber.xml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/entries/jQuery.cssNumber.xml b/entries/jQuery.cssNumber.xml index 60d9cc84..f001de4e 100644 --- a/entries/jQuery.cssNumber.xml +++ b/entries/jQuery.cssNumber.xml @@ -6,6 +6,9 @@ An object containing all CSS properties that may be used without a unit. Prior to jQuery 4.0, the .css() method uses this object to see if it may append px to unitless values. +
    +

    Note: This API has been removed in jQuery 4.0; please pass a string value with the desired units instead.

    +

    You can think about jQuery.cssNumber as a list of all CSS properties you might use without a unit. Prior to jQuery 4.0, it was used by .css() to determine if it needs to add px to unitless values.

    The keys of the jQuery.cssNumber object are camel-cased and the values are all set to true. If you want to prevent the .css() method from automatically adding the px unit for a specific CSS property and that property is not yet a key of the jQuery.cssNumber object, you can add such an extra property:

    

From 12751257569670416ff85b891511484bcbc3111c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?=
 
Date: Mon, 17 Mar 2025 17:35:57 +0100
Subject: [PATCH 5/6] jQuery.cssNumber: Add `if` surrounding the assignment to
 `jQuery.cssNumber`

---
 entries/jQuery.cssNumber.xml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/entries/jQuery.cssNumber.xml b/entries/jQuery.cssNumber.xml
index f001de4e..6a8f60d8 100644
--- a/entries/jQuery.cssNumber.xml
+++ b/entries/jQuery.cssNumber.xml
@@ -12,7 +12,9 @@
     
    You can think about jQuery.cssNumber as a list of all CSS properties you might use without a unit. Prior to jQuery 4.0, it was used by .css() to determine if it needs to add px to unitless values.
    
     
    The keys of the jQuery.cssNumber object are camel-cased and the values are all set to true. If you want to prevent the .css() method from automatically adding the px unit for a specific CSS property and that property is not yet a key of the jQuery.cssNumber object, you can add such an extra property:
    
     
    
-jQuery.cssNumber.someCSSProp = true;
+if ( jQuery.cssNumber ) {
+  jQuery.cssNumber.someCSSProp = true;
+}
     
    
   
   

From 1e47d105626e68a7457592228e0b0c99393322c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?=
 
Date: Mon, 17 Mar 2025 18:07:02 +0100
Subject: [PATCH 6/6] jQuery.cssNumber: Add properties back; document versions

---
 entries/jQuery.cssNumber.xml | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/entries/jQuery.cssNumber.xml b/entries/jQuery.cssNumber.xml
index 6a8f60d8..c49b3c78 100644
--- a/entries/jQuery.cssNumber.xml
+++ b/entries/jQuery.cssNumber.xml
@@ -16,6 +16,36 @@ if ( jQuery.cssNumber ) {
   jQuery.cssNumber.someCSSProp = true;
 }
    +

    By default the object contains the following properties:

    +
      +
    • animationIterationCount (added in 1.12.0/2.2.0)
      • +
    • aspectRatio (added in 3.7.0)
      • +
    • borderImageSlice (added in 3.7.0)
      • +
    • columnCount (added in 1.9.0)
      • +
    • flexGrow (added in 1.11.1/2.1.1)
      • +
    • flexShrink (added in 1.11.1/2.1.1)
      • +
    • fontWeight (added in 1.4.3)
      • +
    • gridArea (added in 3.4.0)
      • +
    • gridColumn (added in 3.4.0)
      • +
    • gridColumnEnd (added in 3.4.0)
      • +
    • gridColumnStart (added in 3.4.0)
      • +
    • gridRow (added in 3.4.0)
      • +
    • gridRowEnd (added in 3.4.0)
      • +
    • gridRowStart (added in 3.4.0)
      • +
    • lineHeight (added in 1.4.3)
      • +
    • opacity (added in 1.4.3)
      • +
    • order (added in 1.10.2/2.0.3)
      • +
    • orphans (added in 1.6.0)
      • +
    • scale (added in 3.7.0)
      • +
    • widows (added in 1.6.0)
      • +
    • zIndex (added in 1.4.3)
      • +
    • zoom (added in 1.4.3)
      • +
    • fillOpacity (SVG-related, added in 1.6.2)
      • +
    • floodOpacity (SVG-related, added in 3.7.0)
      • +
    • stopOpacity (SVG-related, added in 3.7.0)
      • +
    • strokeMiterlimit (SVG-related, added in 3.7.0)
      • +
    • strokeOpacity (SVG-related, added in 3.7.0)
      • +