wp_style_add_data() │ WP 3.6.0

Adds metadata to a CSS stylesheet file that has been added with wp_enqueue_style() function. Use it, for example, to make a stylesheet file work only with certain versions of IE browsers.

The metadata will be added to the stylesheet only if the stylesheet has already been enqueued with wp_enqueue_style() function.

There is a similiar function for scripts: wp_script_add_data()

Uses: wp_styles()

No Hooks.

Return

true|false. True on success, false on failure.

Usage

wp_style_add_data( $handle, $key, $value );
$handle(string) (required)
Name of the stylesheet to add metadata to. Use here the value of $handle parameter of wp_enqueue_style() function.
$key(string) (required)

Name of the data for which we're storing a value. Accepts:

  • conditional — String. A conditional comment to specify, for example, that this style is only for IE 6 browsers, or only for IE browser not older than 7 version.

    Examples of values of $value parameter when $key = conditional:

    • IE - only for IE (of any version)
    • IE 6 - only for IE 6
    • IE 7 - only for IE 7
    • IE 8 - only for IE 8
    • IE 9 - only for IE 9
    • gt IE 6 - only for IE greater than 6
    • lt IE 9 - only for IE less than 9
    • gte IE 7 - only for IE greater than or equal 7
    • lte IE 7 - only for IE less than or equal 7
    • !IE - for all browsers except IE The latest version of IE which supports conditional comments is IE9 — more modern versions don't support conditional comments.
  • alt — Boolean. To add rel="alternate stylesheet"
  • title — String. For preferred/alternate stylesheets.
  • rtl (Right-to-Left) — Boolean/String. To declare an RTL stylesheet.
  • suffix — String. Optional suffix, used in combination with RTL.
$value(mixed) (required)
String containing the data to be added.

Examples

0

#1 Add conditional comments for the stylesheets

This example is from Twenty Fifteen theme.

It loads stylesheets only for IE8 and older versions. IE10 and more modern versions don't support conditionals comments.

add_action( 'wp_enqueue_scripts', 'wpdocs_enqueue_scripts' );
function wpdocs_enqueue_scripts() {

	// Loads stylesheets for Internet Explorer
	wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', [ 'twentyfifteen-style' ], '20141010' );
	wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );

	// Loads stylesheets for Internet Explorer 7
	wp_enqueue_style( 'twentyfifteen-ie7', get_template_directory_uri() . '/css/ie7.css', [ 'twentyfifteen-style' ], '20141010' );
	wp_style_add_data( 'twentyfifteen-ie7', 'conditional', 'lt IE 8' );
}

Outputs a link tag wrapped in a conditional comment:

<!--[if lt IE 9]>
<link rel='stylesheet' id='twentyfifteen-ie-css'  href='http://test.ru/wp-content/themes/twentyfifteen/css/ie.css?ver=20141010' type='text/css' media='all' />
<![endif]-->
<!--[if lt IE 8]>
<link rel='stylesheet' id='twentyfifteen-ie7-css'  href='http://test.ru/wp-content/themes/twentyfifteen/css/ie7.css?ver=20141010' type='text/css' media='all' />
<![endif]-->

lt means «lower than». Use gt to specify «greater than» stylesheets.

0

#2 Other usage examples 

// alt
wp_enqueue_style( 'mystyle_id', 'http://example.com/css/mystyle.css' );
wp_style_add_data( 'mystyle_id', 'alt', true );
// <link rel='alternate stylesheet' id='mystyle_id-css'  href='http://example.com/css/mystyle.css?ver=4.4.1' type='text/css' media='all' />

// title
wp_style_add_data( 'mystyle_id', 'title', 'foo' );
// <link rel='stylesheet' id='mystyle_id-css' title='foo' href='http://example.com/css/mystyle.css?ver=4.4.1' type='text/css' media='all' />

Notes

Changelog

Since 3.6.0 Introduced.
Since 5.8.0 Added 'path' as an official value for $key. See wp_maybe_inline_styles().

wp_style_add_data() code WP 6.5.2

wp-includes/functions.wp-styles.php 
function wp_style_add_data( $handle, $key, $value ) {
	return wp_styles()->add_data( $handle, $key, $value );
}

styles (include files)

Scripts and Styles