Content aware CSS - apply style only if content is available - html

Is it possible to have a css style be aware of whether the element it is being applied to has some sort of content or not? I am currently using tables (forced to since the end user uses cms to create pages) with a css for each cell, as so
<table>
<tr>
<td class="someClass">Test value 1</td>
<td class="someClass">Test value 2</td>
</tr>
<tr>
<td class="someClass">Test value 3</td>
<td class="someClass"></td>
</tr>
</table>
As displayed, there is the chance that a table cell is left empty. Is there a way to make "someClass" aware of this and not apply the style to this cell?
I am sure there is some js hack I could apply, but I wonder if it is possible with pure css. Long shot?
Thanks.

Simply use the :empty pseudo-class like so:
td.someClass:not(:empty) {
/* Styles */
}
As Petr Marek mentions it's not very reliable as a cross-browser solution, so if you must support older browsers (IE8 and older) you will need JS (which you can probably figure out yourself). Otherwise, the above CSS rule will work just fine.
You can find the browser compatibility of :not() and :empty here

The only thing I can think of that relates to your question is psuedo-classes, such as empty.
Here is an example:
<html>
<head>
<title>Example</title>
<style type="text/css">
.cell:not(:empty) {
background-color: red;
}
.cell:empty {
background-color: blue;
}
</style>
</head>
<body>
<table><tBody>
<tr><td class="cell"></td><td class="cell">Not empty</td></tr>
<tr><td class="cell">Not empty</td><td class="cell"></td></tr>
</tBody></table>
</body>
</html>
In modern browsers, you will see that empty cells are blue and cells with content are red.
The key here is the first line of CSS, .cell:not(:empty). This applies the CSS if the element does not have the psuedo-class :empty applied.

No, with pure cross-browser css it is not. You will have to edit their cms or use javascript.

Related

td stacking without using css

Our CRM allows us to send automatic emails to our customers using their software. Things like purchase receipts and so forth. While they offer HTML editing of the emails, it's heavily restricted and we may not use any CSS.
As far as what their style guide does allow, it appears to be all HTML and some inline styling, for example:
<span style="color:#ffffff">white</span>
<div style="color:#ffffff">
<img src="dickbutt.gif" style="width:30px;height:20px">
...are all OK according to the guide. However, no other CSS or CSS references are allowed, including:
<link rel="stylesheet" href="/stylesheet.css" type="text/css">
or
<style type="text/css">
#import "/stylesheet.css";
</style>
or
<style type="text/css">
body { color:green; }
</style>
To add insult to injury, and I should have included this above, everything above the <body> tag (and including the body tag itself) is stripped out upon saving the file in their in-software HTML editor. They have some kind of auto-code modification scripts that reference the "approved" code in their style guide, and strips what's left. So what am I left with? Not much at all. Basically from between opening <table> to the closing </table>. They even strip out </body> and </html>.
With the remaining code, I'm unable to use #media at all or allow any <td> stacking. So, are their any alternate ways of linking to a style sheet you know about? ...a method that will allow stacking without access to CSS? I'm basically looking for a way to make these emails responsive under the restrictions outlined above.
I uploaded the style guide to JSfiddle: https://jsfiddle.net/Lxfqus7f
Yes, yes 100 times yes. Everyone who has ever designed an email template has had the same complaints. Email design is Web design circa 1999. First off just forget CSS references just inline everything you can and do not bother with #media tags, forget they even exist.
Table Design
Think of a <table> as a spreadsheet, a <tr> as a table row, and a <td> as a table cell. Instead of "stacking" TDs try nesting tables. A new table can go inside a TD and in a sort of Matryoshka doll style fashion you can make any layout you want.
<table>
<tr>
<td>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</td>
<td>5</td>
</tr>
</table>
The above works fine.
Responsive emails
The words responsive and email do not normally go together. What email clients render is severely limited but there are ways to work around it. Like setting your Master Table's width to 100% and having two TDs on each side. Like this:
<table width="100%" cellspacing="0" cellpadding="0">
<tr height="500px" valign="top">
<td width="*" bgcolor="#00FFFF"> </td>
<td width="550px" bgcolor="#FF0000"> <center><br><br> <H1>Body</h1> </center> </td>
<td width="*" bgcolor="#00FFFF"> </td>
</tr>
</table>
Here are both examples in a JSfiddle.
http://jsfiddle.net/e8r9ky4x/
Looks like your style guide includes the use of some inline styles:
<p>Our studio is <span style="color:purple">purple.</span></p>
Define sections of text that require different HTML <div>
<div style="color:#FC8301">
<h3>This title.</h3>
<p>This is sentence.</p>
</div>
Since you're automatically generating emails anyway, why not just let this one slide and declare your styles in variables and use them where appropriate?
Are they stripping out all style tags? Could you just put a style hidden at the begginning of a TD?
<td><style>/*rules are for quitters!*/</style>Stuff</td>
Using a style tag in the body may not be the best of things to use and may even induce vomiting in many web developers, but it IS a possibility to utilize in Email.
I would strongly recommend not to use it this way outside of cases like you have listed, and would recommend HEAVY testing across all clients as it can sometimes cause buggy results.
I would look to make your inline styling do most of the heavy lifting and just use the style tags in body for items that cannot be done any other way.
Below is some good resources on Responsive HTML email made to work on GMAIL APP (which strips the style tag almost completely) and should help give you a baseline on best way to create your emails.
Hybrid coding approach - http://labs.actionrocket.co/the-hybrid-coding-approach
Hybrid coding redux - http://labs.actionrocket.co/the-hybrid-coding-approach-2
Is Hybrid right option - http://labs.actionrocket.co/hybrid-is-the-answer-is-it-the-right-question

Can I include td { } in an inline style attribute of my table?

I'm working with a content management system that doesn't allow me to alter the head of the pages I'm working with. The page I'm creating will be edited by others using a WYSIWYG editor and will include a table where users can upload new documents. I want to style this with CSS so that I can give one command to put a line between each row (and this won't need to be done every time by each user - since they likely won't know how), but every time I do this it doesn't show anything. My code attempt is below, is this possible?
<table width=600px cellSpacing=2 cellPadding=2 style="td {border-bottom: solid 1px black;" }">
Not that I'm aware of. But you can do this
<style type="text/css">
.specialtable td {
border-bottom: 1px solid black;
}
</style>
<table width=600px cellSpacing=2 cellPadding=2 class="specialtable">
...
</table>
This will ensure that only this specific table's <td/> elements will be styled according to your needs. Note: according to the w3c specs, <style/> is only allowed within the <head/> element of your document. But in many browsers, it still works if you put it anywhere in the <body/>. Since you're looking for a kind of hack, this may be a viable solution for you
You can use frame and rules, two lesser-known attributes of the table element.
<table cellpadding="3" cellspacing="0" frame="below" rules="rows">
<tr><td>one</td><td>two</td></tr>
<tr><td>three</td><td>four</td></tr>
<tr><td>five</td><td>six</td></tr>
</table>
See jsFiddle.
Or if you only want lines in between the rows and not below the bottom one, leave out frame="below".
This won't work in all browsers though.

Fix page-break-before behavior difference between IE9 and Firefox (3.6)

I'm formatting one of my webpages for printing, and in doing so am adding a pagebreak using this CSS Style.
#media print
{
.page-break { display:block; page-break-before:always; }
.print-hidden { display:none; }
}
In my initial testing (printing using XPS Document Writer), I've noticed that when printing from IE9 the page breaks appear and in Firefox they do not.
A sample page output would look like :
<table>
<tr class="print-hidden"><th colspan=3>Balance</th></tr>
<tr><td>10</td><td>x</td><td>(St) Legs Together: Head Turn</td></tr>
<tr><td>5</td><td>x</td><td>(St) One Leg: </td></tr>
<tr></tr>
<tr class="print-hidden"><th colspan=3>UE Strengthening</th></tr>
<tr><td>100</td><td>x</td><td>(Su) Biceps</td></tr>
<tr class="page-break"></tr>
<tr><td>50</td><td>x</td><td>(Su) Tricpes</td></tr>
<tr></tr>
</table>
Apparently on the w3schools page for page-break-before it says
Note: Use the page-breaking properties as few times as possible and avoid page-breaking properties inside tables, floating elements,
and block elements with borders.
So, I guess my question(s) would be:
Is there a workaround for FireFox?
If not, how would I have to structure my html to be able to use page-break-before (or really any page breaking).
The problem is likely due to having your page-break-before class on a tr element. Try changing to this:
<table>
<tr class="print-hidden"><th colspan=3>Balance</th></tr>
<tr><td>10</td><td>x</td><td>(St) Legs Together: Head Turn</td></tr>
<tr><td>5</td><td>x</td><td>(St) One Leg: </td></tr>
<tr></tr>
<tr class="print-hidden"><th colspan=3>UE Strengthening</th></tr>
<tr><td>100</td><td>x</td><td>(Su) Biceps</td></tr>
</table>
<div class="page-break"></div>
<table>
<tr><td>50</td><td>x</td><td>(Su) Tricpes</td></tr>
<tr></tr>
</table>
divs are more reliable for this sort of thing.
Here is what I ended up with (tested on IE9 and FF 3.6). It behaves as I expected.
<ul>
<li><reps>10</reps> x <exercisename>(St) Legs Together: Head Turn</exercisename></li>
<li><reps>5</reps> x <exercisename>(St) One Leg: </exercisename></li>
<li><reps>100</reps> x <exercisename>(Su) Biceps</exercisename></li>
<li class="page-break"><reps>50</reps> x <exercisename>(Su) Tricpes</exercisename></li>
</ul>

Multiple CSS class, with a element

I have links in a table.
like:
<table>
<tr>
<td></td>
<td></td>
<td><a href="lalala"</a></td>
<td></td>
</tr>
</table>
I want to use mutliple classes:
<td class="XYtableItem itemID"><a href="lalala" /></td>
The problem is:
I cant reach the a elements in CSS
I tried these:
.XYtableItem a {}
a.XYtableItem {}
XYtableItem > a {}
none of these works.
I dont rly know this should work or not.
+I cant put classes to the a elements, but doesnt matter, not working eiter.
They should work, out of curiosity what CSS rules are you trying to apply to the link ? Bare in mind that there may be some other rules in the CSS overriding your ones, giving you the impression you're not targeting the link correctly.
.XYtableItem a
This one should be good
The first rule should match as that selects any a element that is the descendant of an element with the XYtableItem class.
The second rule will any a with the class XYtableItem and the third any a element that is a descendant of a XTtableItem element - possibly just missing the class selector (.).
Try adding content to your a tag as it shouldn't be self closing.
Example at http://jsfiddle.net/mfhHG/
As other answers suggest, most probably your style might be overriding by something else.. You firebug to inspect the element and trace the style.. it should show you what exactly is being overridden by which style..
There are some problems with your HTML,
<table>
<tr>
<td>Link</td>
<td>Link2</td>
<td>Link3</td>
<td>Link4</td>
</tr>
</table>
And the selectors should be very simple.
Check this example.
<style>
td.aaa a {
color: green;
}
td.bbb a {
color: yellow;
}
</style>
<table>
<tr>
<td class="XYtableItem aaa">aa</td>
<td class="XYtableItem bbb">bb</td>
</tr>
</table>
The above works for me.
(Although I have had some problems with some styles like padding etc when using on a tags on IE)

Firefox 4/5 table border issue with rules=all

Here is a simple table example of using table rules=all with cell borders
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<table rules="all">
<tr>
<td style="border: red solid 1px;">
Title
</td>
</tr>
</table>
</body>
</html>
In most browsers (including Firefox 3.6) it comes out with a red border round the cell, but in Firefox 5 (and IIRC also Firefox 4) there is no cell border.
Is this a bug in Firefox or is there some variation allowed by the specification?
On a related point, is there any point in using the table rules attribute? It doesn't seem to be deprecated but I can't see it does anything that you couldn't do in CSS. In this case, ASP.NET was generating it automatically otherwise I would never have used it.
There is no spec for what rules="all" actually does yet, so pretty much any behavior is "correct".
That said, the current Firefox behavior is to map rules="all" to some border styles in the collapsed border model. Given the details of that mapping (which are currently in the HTML5 draft at http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#tables ), the observed behavior is correct.
The 'rules' are only displayed if there are other td's to separated it from. And then the style information is partly overwritten by the adjacent cells. If you create a 3x3 table like this
<table rules="all">
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<tr>
<td>foo</td>
<td style="border: red solid 1px;">
Title
</td>
<td>foo</td>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<tr>
</table>
FF5 will draw red lines at the right and bottom of the "Title" cell and the others black. Seems like the style information of upper and more left cells is more powerful.
Hope this helps
Cheers
tannerli
I can't answer the first part - although I was able to make it work by adding some kind of border to the table tag: http://pastehtml.com/view/b35h9852w.html
According to w3schools, you are recommended to only use CSS for this sort of styling (and I agree).
It does appear to be a bug in Firefox, though. I can't find a clear explanation either way.