Alternate stylesheet with css() helper not possible

Kirby 3 Solved ✅
1

It looks like this just isn’t supported so it might as well be a feature request but perhaps I’m just doing something wrong:

I want to add an alternative stylesheet using Kirby’s css() helper like this:

<?= css(['assets/css/contrast.css'],[
	'media' => 'screen',
	'rel' => 'alternate stylesheet',
	'title' => 'High contrast'
]) ?>

but it doesn’t care for the rel attribute and just outputs rel="stylesheet", anyway. Am I doing anything wrong or is this just not implemented? Is there an alternative other than adding static HTML?

2 
<?= css('assets/css/contrast.css', [
	'media' => 'screen',
	'rel' => 'alternate stylesheet',
	'title' => 'High contrast'
]) ?>

should do the trick.

3

No, it doesn’t. The output produces rel="stylesheet" instead of rel="alternate stylesheet" regardless.

4

Ah, you specifically meant that string – misunderstood. That indeed cannot work, as the rel attribute is hardcoded: kirby/helpers.php at 351b6348348cf78aed9a65920358caf218473102 · getkirby/kirby · GitHub

I would rate that as a bug (overriding stylesheet with alternate stylesheet is fine as per the spec, though there’s a bit extra logic involved as the MDN article implies), so a Github ticket is probably the best way.

5

Thanks. In the meantime I’m working around this with

<link href="<?= url('assets/css/contrast.css') ?>" rel="alternate stylesheet" type="text/css" media="screen" title="High contrast" />

Works just as well. :slight_smile:

6

:+1:

…this actually piqued my interest and I gave it a shot with a quick PR: Allow `rel="alternate stylesheet"` in css() helper by sebastiangreger · Pull Request #4099 · getkirby/kirby · GitHub

1 Like
7

@VIPStephan In the just-released 3.6.2-rc.2, this should now work as you initially intended :slight_smile:

1 Like