CSS space in name & troublesome XSLT - css

I'm trying to create an XSLT which lists out movies, and I'm styling the titles so that each title has it's own color, I then select the title with with interpolation (XPath?)
Here is the XSL file:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Videos</title>
<style>
table, tr, td { border: thin black solid }
th { background-color: #AAFFAA }
.Daredevil { color: red; }
/* Look at those spaces! Hrmphf! */
.Drag Me To Hell { color: green; }
</style>
</head>
<body>
<table>
<tr><th>Movies</th></tr>
<xsl:apply-templates select="//movie"/>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="//movie[not(#title=preceding::movie/#title)]">
<!-- Title should be the one of the titles in the CSS -->
<tr class="{#title}"><td><xsl:value-of select="#title"/></td></tr>
</xsl:template>
</xsl:stylesheet>
The problem however is that some movie titles contain spaces. Can I have spaces in the name? If not, are there any workarounds (besides having underscores or the like in the XML)?
Update:
Ok, I get that it's not possible. At the moment I'm using translate(#title, ' ', '-') Which works when the CSS-names are delimited by -. I would still like to know if there are any better way of doing this. :)

class="Drag me to" creates an element with three different classes.
The selector .Drag.Me.To will match elements with all three classes.
However, it will match them in any order, and won't count duplicates.

No, you cannot have spaces in CSS rule names

CSS classes / id´s cannot contain spaces.
Since a space is used to seperate different classes.
You will have to resolve to a (-)

It feels a bit odd to me to tie the CSS to the actual data content in this way. Your stylesheet seems to know in advance what it expects to find in the data file, and that feels like bad design - it should be generic. Why not introduce an indirection from movie title to CSS classes:
<xsl:variable name="movieStyles">
<movie title="Drag me to hell" css-class="hell-class"/>
<movie ...
</xsl:variable>
then <tr class="{f:css-class-for-title(#title)}" ...
where the function f:css-class-for-title uses the lookup data to map movie titles to CSS classes.

Related

Multiple :target style entries into one

I was wondering if there was anyway to make this CSS more compact and generic
#av:target, #bis:target, #ena:target, #esc:target, #kis:target, #kso:target... {
background:red;
}
basically I have many of these styles and without code would like if i could just have one entry for all since they all do the same thing.
As ids must be unique, your solutions are two: classnames or attributes. Examples:
With class
<!-- HTML: -->
<element class="target">
<!-- CSS: -->
.target:target {
/* your styles **/
}
With attribute
<!-- HTML: -->
<element data-target=""> <!-- Can be empty or filled, but the important is the attribute -->
<!-- CSS: -->
[data-target]:target {
/* your styles **/
}
By this mode, you have one rule in your CSS that you can apply to all elements that you need. Choose the one that best fits with your requirements.

How to remove autospace between elements in xml?

There's an xml document like this:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet href="#style" type="text/css"?>
<root>
<style>
style {display: none}
entry {display: block}
english {font-weight: bold}
spanish {font-style: italic}
</style>
<entry>
<sense_unit>
<english>abandon</english>
<spanish>abandonar</spanish>
</sense_unit>,
<sense_unit>
<english>friend</english>
<spanish>amigo</spanish>
</sense_unit>
</entry>
</root>
Web browser renders this:
style {display: none} entry {display: block} english {font-size: 10pt; font-family: "Times New Roman"} spanish {font-size: 9pt; font-family: "Arial"}
abandon abandonar , friend amigo
I'd like to hide the contents of style element, but it still appears.
I don't want the space between abandonar and the following comma. (But I don't want to insert the comma inside the sense_unit) How can I do that? (That is, ... abandonar , friend ... -> ... abandonar, friend ...)
This has nothing to do with css, and everything to do with well-formed XML. All linebreaks in XML are considered an element and therefore will create those spaces. Remove all your line-breaks and those spaces will disappear.
Update jsFiddle example where I've removed all your line breaks and spaces just within the <entry>

How to write regular expressions in CSS

How do I use regular expressions in CSS? I found a tutorial here for matching static strings in CSS, but I haven't been able to find one for using regular expressions to match multiple strings in CSS. (I found one here, but I couldn't get it to work. I also looked at the W3C documentation on using regular expressions, but I couldn't make sense of the document.)
I'm want to match a series of <DIV> tags whose ids start at s1 and increase by one (ie. #s1 #s2 #s3...).
I know that div[id^=s], div[id^='s'], and div[id^='s'] each perform the match as I intend it in my CSS. However, each of those also match an id of #section, which I don't want to happen. I believe that "/^s([0-9])+$/" is the equivalent PHP string--I'm just looking for it in CSS version.
There is no way to match elements with a regular expression, even in CSS3. Your best option is probably to simply use a class for your divs.
<style>
.s-div {
// stuff specific to each div
}
</style>
<div id="s1" class="s-div"><!-- stuff --></div>
<div id="s2" class="s-div"><!-- stuff --></div>
<div id="s3" class="s-div"><!-- stuff --></div>
<div id="s4" class="s-div"><!-- stuff --></div>
<div id="s5" class="s-div"><!-- stuff --></div>
Also remember that you can separate multiple class names by a space inside a class attribute.
<div class="class1 class2 class3"></div>
javascript:
/* page scrape the DIV s# id's and generate the style selector */
re=/<div\b[^>]*\b(id=(('|")?)s[0-9]+\2)(\b[^>]*)?>/ig;
alert(
document . body . innerHTML .
match(re) . join("") .
replace(re,"div[$1], ") + "{ styling details here }" );
alert(
("test with <div id=s2 aadf><DIV ID=123> <DIV adf=asf as><Div id='s45'>" +
"<div id=s2a ><DIV ID=s23 > <DIV asdf=as id=S9 ><Div id='x45' >") .
match(re) . join("") .
replace(re,"div[$1], ") + "{ styling details here }"
);
The test yields
div[id=s2], div[id='s45'], div[ID=s23], div[id=S9], { styling details here }
Note the dangling , and the case preserved S9.
If you don't want or can't use the solution posted by #zneak, you could do that editing the labels with javascript, but i'll advice you: It's a hell of work.
The following CSS will select #s0, #s1, ... , #s9 and not #section, though a browser must implement the CCS3 negation :not().
The final selection is equivalent to:
/^s[0-9]?.*[0-9]$/
which says that each id must start with s and a number and end with a number like:
s6, s42, s123, s5xgh7, ...
The :not() line vacuously excludes those ID's that do not start properly using an empty style {}.
<style>
div:not([id^=s0]):not([id^=s1]):not([id^=s2]):not ... :not([id^=s9]) {}
div[id^=s][id$=0], div[id^=s][id$=1], div[id^=s][id$=2], ... div[id^=s][id$=9] { ... }
</style>
CSS3 does not use regular expressions to define selectors BUT ...
CSS Conditional Rules Module Level 3
defines a very specific function, regexp(<string>), that parses a URL with a regular expression when creating an #document rule.
<style>
/* eliminate the alphabet except s - NB some funny characters may be left */
/* HTML id's are case-sensitive - upper case may need exclusion & inclusion */
div[id*=a], div[id*=b], div[id*=c], ..., div[id*=q], div[id*=r] {}
div[id*=t], div[id*=u], div[id*=v], div[id*=w], div[id*=x], div[id*=y], div[id*=z] {}
div[id*='_'], div[id*='-'], div[id*='%'], div[id*='#'] {}
/* s can not be embedded */
div[id*=0s], div[id*=1s], div[id*=2s], ..., div[id*=9s] {}
/* s will be followed by a string of numerals - maybe a funny char or two */
div[id^=s0], div[id^=s1], div[id^=s2], ... div[id^=s9] { ... }
</style>

xml counting elements in a list does not work in firefox

I am writing some CSS to customise the display of an XML document. Basically I want to customise the display of child elements, and render them similar to HTML OL/UL/LI elements.
My XML is structured like this:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<transcription>
<turn>
<speaker>Speaker Name</speaker>
<clause>
text here
</clause>
<clause>
one or more clauses
</clause>
</turn>
</transcription>
My CSS looks like this:
turn {
counter-reset: item;
}
turn clause {
display:list-item;
}
clause {
content: counter(item);
counter-increment: item;
}
I am using this site: http://www.xml.com/lpt/a/401 and basically have a similar document http://www.xml.com/2000/03/29/tutorial/examples/display1.xml, the problem is that the display1.xml does not work in firefox. I do get it working in IE, Safari, Chrome etc.
Can any provide a link, or sultion that would work in firefox, as well as the other browsers?
It looks like there is some bug in the way that firefox implements the display: list-item property, specifically the passing of the counter value. I believe this gives rise to the zeros which show in firefox, but not in chrome.
My workaround is to forget about using 'display: list-item' and instead style the items directly so they appear as a list:
transcription {
counter-reset: item;
}
clause {
display:block;
margin-left:40px;
}
clause:before {
counter-increment: item;
content: counter(item) ". ";
}
this works with the following XML:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style2.css"?>
<transcription>
<turn>
<speaker>Speaker Name</speaker>
<clause>
text here
</clause>
<clause>
text here
</clause>
<clause>
text here
</clause>
</turn>
let me know how you get on...
AL

apply css to nested divs

I use the following code on my page:
<div id="itemstable" class="item_type1">
...other divs here...
</div>
And in my CSS file I have this code:
.item_type1 div {
background-image: url(images/type1.giff);
}
the problem is there are a lot of different item types so I will need to have a lot of lines in my CSS file. I was wondering how to apply the background-image: url(images/type1.giff); style to the nested divs without assigning it to each one. eg. I want to change the code for the "itemstable" div so that it applies a css rule to the nested divs.
Is this possible?
EDIT: I'm looking for something like this:
<div id="itemstable" style="SET BACKGROUND IMG FOR NESTED DIVS HERE">
...other divs here...
</div>
(If I'm understanding the question correctly:)
Think about using a different ID/class scheme. I don't know about the further specifics of your structure, but id="itemstable" class="item_type1" seems slightly redundant to me. Can itemstable be anything else than item_type1? Try to apply more generic class names and keep the specific cases for IDs.
Failing that, you can add another class that is responsible for adding the background image: class="item_type1 item_types".
EDIT
Since it seems sheer mass is the main problem (not applying the style as the title suggests) it's probably best to dynamically insert a style in the page header. Something along the lines of:
<head>
...
<style type="text/css" media="screen">
<?php echo "#$myelement"; ?> div { background: url(<?php echo $image; ?>) ...; }
</style>
</head>
Inline styles can only apply to the element directly, not one of its children. I.e.:
<div style="background: ...;">
The background only applies to this one div.
You can't use selectors in inline styles like:
<div style="div { background: ...; }">
I think including a little more of your HTML would make your question easier to understand.
You can certainly include multiple rules in a compound selector:
.item_type1 div.a, .item_type1 div.b, .item_type1 div.c {
background-image: url(xyz.gif);
}
But since you are pulling images from the database dynamically, you will need to either include them in your dynamic code-- in the divs themselves, or dynamically create CSS as suggested above:
<style>
<% for $i in $images { echo "div.image$i div { background-image: url(/path/to/$i) }" %>
</style>

Resources