CODEWITHSUNDEEP
htmlcssxml
Mkalafut
Mkalafut

Reputation: 741

Can XML interact with a CSS style sheet?

Let's say I have a CSS sheet that holds information for how a site that shows system statuses is presented. Depending on the status of the site, one of the following will be an attribute to the status:

#green_status 
{
    color: white;
    text-align: left;
    background: url(images/green.jpg) no-repeat;
}

#yellow_status
{
    color: white;
    text-align: left;
    background: url(images/yellow.jpg) no-repeat;
}

#red_status
{
    color: white;
    text-align: left;
    background: url(images/red.jpg) no-repeat;
}

and an XML document that stores details for individual sites and their statuses

    <site> 
        <name>New Site</name>
        <headerImage>header image goes here</headerImage>
        <systemStatus color="green">Normal</systemStatus>
        <networkNotes>System status is normal</networkNotes>
    </site>

I am going to use XML DOM to select values from the XML to populate elements of the page. Though after some testing I am still finding that I can change the text of the system's status but not the bar color without actually changing the site's attributes.

I'd like to be able to just change the XML file and set <systemStatus color"red">SYSTEM IS DOWN</systemStatus> and have that change not only the text, but the bar color to "red.jpg" without having to go in to the html and manually edit the status.

So far in order to solve this, I've added the 'color="green, yellow, red"' attribute to my XML elements, added 2 new statuses to the CSS (indicated by the first code block of this question), and have so far been unable to connect the dots.

Is there a way that I can make it to where the changes only need to be made to the XML file to change both the text & bar color for the system status of that site? The end goal here is to be able to just change the XML attribute and text of the systemStatus and change both the bar & the text on the site.

Upvotes: 1

Views: 923

Answers (4)

Lie Ryan
Lie Ryan

Reputation: 64837

XML does not specify any display or formatting, so if you really want to show a text as green, you need to do that using the display language (e.g. HTML or XSL-FO).

You can specify a tag to contain (X)HTML fragment, either as XHTML fragment, e.g.

<site xmlns:h="http://www.w3.org/1999/xhtml"> 
    ...
    <systemStatus><h:p class="ok" style="color: green;">Normal</h:p></systemStatus>
    ...
</site>

or as CDATA:

<site> 
    ...
    <systemStatus><![CDATA[<p class="ok" style="color: green;">Normal</p>]]></systemStatus>
    ...
</site>

Your host display language (HTML+Javascript in your case) has to then insert this into the host document's DOM as an (X)HTML fragments or textually with element.innerHTML.

Be careful about inserting with innerHTML from untrusted source though, if the data in the XML file comes untrusted source, they may potentially contain Javascript code, which may then be executed when inserted into the host HTML.

Upvotes: 0

Pointy
Pointy

Reputation: 413702

What everybody else said, plus you can set the content via CSS too:

systemStatus[color='green']::after {
  content: "ALL IS WELL";
}

I suggest using a descriptive term for the attribute rather than explicitly a color, so that you can change your mind later about what the display should be without changing the nomenclature. Something like

  <systemStatus status="ok"/>

and in CSS

  systemStatus[status="ok"] {
    color: green;
    background-color: white;
  }

Upvotes: 3

GolezTrol
GolezTrol

Reputation: 116100

You can link a CSS stylesheet to an XML file using this processing instruction:

<?xml-stylesheet href="my-style.css"?>
... rest of document here...

More details about it can be found here: http://www.w3.org/Style/styling-XML

With that, you can add styling to any element and even use attributes in the selector:

systemStatus[color="red"] {
  color: red;
}

I think you can also use special selectors like :first-child and such.

Afaik, there is no way to include Javascript in an XML file, but you should be able to tranform the XML into another XML if the current XML doesn't have the structure you need. In the transformation you can add the elements and properties you need to be able to style it. See also Xml to Xml transformation using XSLT.

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

Use the CSS3 attribute selector.

<systemStatus color="green">

CSS:

systemStatus[color='green'] {
     background-color:#2f2;
}

Upvotes: 3

Related Questions