How can I force CQ5.5 to ignore CSS data-uri-schemes?


Tags: css,base64,cq5,data-uri

Problem :

I am trying to include a custom font into css using the data-uri-scheme. CQ5 (I'm using version 5.5) is adding the path from the clientlib directory to the location where the css file with the data-uri-scheme font data is located.

So instead of just ignoring the css property:

@font-face {
  font-family: 'CustomFont';
  src: url(data:application/x-font-woff;...
  ...
}

CQ5 does the following:

@font-face {
  font-family: 'CustomFont';
  src: url(desktop/css/data:application/x-font-woff;...
  ...
}

Is this a bug in CQ5.5 or can I add/do something to prevent the addition of "desktop/css"?

The result is, I'm getting 404 HTTP status because the font is "not found".

[UPDATE]:

The css file is included in the base.jsp in the html <head> section.

<link rel="stylesheet" 
    href="/etc/designs/myproject/clientlib/desktop.css" type="text/css"/ >

Location of base.jsp:

/apps/myproject/pages/base/base.jsp

Location of css.txt:

/etc/designs/myproject/clientlib/desktop/css.txt


Solution :

It's a bug, will be fixed with 5.6. Including the individual css file directly (as mentioned) avoids the clientlib rewriting, otherwise I don't know of a workaround inside a clientlib.

The reason is that clientlibs are rewriting the relative paths because the base changes from the individual css file to the concatenated clientlib css. "data:" uris were simply not considered properly here.


    CSS Howto..

    How can I show a element on my site when hovered with only JS?

    How to load and apply a CSS stylesheet at runtime in a Flex application?

    How to make a dotted underline link on hover?

    How would I call :parent for this tooltip?

    How to make a CSS composite scalable

    How to attach click event to a css styled checkbox

    How to display visual rows and cols in textarea using css

    how to get true css property names from CSSStyleDeclaration object?

    How to change extjs grid single cell background color depending on value changes?

    How to select an element and its first child without repetition in CSS?

    How to hide table row overflow (take 2)

    How can I make my Div box holder look like this inside with CSS?

    How To Use CSS To Style The Output Of JavaScript

    Resharper: How to suppress inspection errors resulting from CSS hacks?

    HTML table show last column using media queries

    How to move a CSS class below another? [closed]

    How to set background color to the column using CSS?

    How to keep long image within background cover at any screen size in CSS?

    How to hide a CSS media query from print? “not” logical operator does not work

    How to restrict zoom of webpage to stretch when iPhone and Android in landscape orientation?

    How to place a footer at the bottom of a page in CSS?

    How to put image and input on the same line with css

    How to create CSS gradient from the centre? [closed]

    How to put a banner above the fixed navbar of bootstrap which disappears when scrolling down?

    How to align horizontally nav bar in css?

    How can I make my
    fit vertically into a parent div?

    How to make text “Passed” and progress bar appear in line in smaller views?

    (CSS) Set Id for Class How to Use

    How to move the scrollbar down

    How to change the way a copy-paste text behaves?