Alternate stylesheet only works with absolute address for link?

Question

I am trying to add a stylesheet when users are accessing the blog section of my site from and iPad. The first snippet of code works, however, I don't want to use the absolute path. I want to use wordpress's function.

function ipad_css() {
  if( preg_match('/ipad/i',$_SERVER['HTTP_USER_AGENT'])) {?>
<link rel="stylesheet" type="text/css" href="http://website/wp-content/themes/my_theme/ipad.css" media="screen" /> 
<?php }
  }
  add_action('init','ipad_css');

This doesn't seem to work:

function ipad_css() {
  if( preg_match('/ipad/i',$_SERVER['HTTP_USER_AGENT'])) {?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/ipad.css" media="screen" /> 
<?php }
  }
  add_action('init','ipad_css');

I'm confused as to why it won't work. I have trying stylesheet_url as well with no luck.

Answer 1

Try replacing <?php bloginfo('template_directory'); ?> with <?php echo get_template_directory_uri(); ?>

Also, I wouldn't hook it to the initaction, why don't use wp_print_styles instead? It is a style after all.

Answer 2

You can use this filter to filter out styles with any condition, or alternate output href (so remove/change domain too) string for certain .css files, example:

add_filter( 'style_loader_src', function($href){
if(strpos($href, "name-of-allowed.css") !== false) {
return $href;
}
return false;
});