current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 6 down vote favorite
2

I wonder if there is a "correct" way to display different content, based on the the state of responsive webdesign. Different in this case is meant as an abbreviated text to display instead of the full one.

I have created this example table with a couple columns, containing either the full name of a state, or, when resized to a smaller screensize, it's 2-letter code.

HTML:

<!doctype html>
<meta name="viewport" content="width=device-width"/>
<body>
<table>
<tr>
    <th><span class="full">California</span><span class="abbr">CA</span></th>
    <th><span class="full">Florida</span><span class="abbr">FL</span></th>
    <th><span class="full">Texas</span><span class="abbr">TX</span></th>
    <th><span class="full">Georgia</span><span class="abbr">GA</span></th>
</tr>
<tr>
    <td>Sacramento</td>
    <td>Tallahassee</td>
    <td>Austin</td>
    <td>Atlanta</td>
</tr>
</table>
</body>
</html>

CSS:

th {
    border: 1px solid #000;
}

td {
    border: 1px solid #000;
}

@media screen and (max-width:760px){
.full {
    display: inline;
    }
.abbr {
    display: none;
}
}

@media screen and (max-width:320px){
.full {
    display: none;
    }
.abbr {
    display: inline;
}
}

jsFiddle

It works as I want, but this solution kind of seems more like a hack to me to get it working.

I've googled, but haven't found anything regarding the topic, which might just be the result of not knowing what exactly to ask. Anyhow, I somehow got the feeling, that there's a more sophisticated way of doing such a thing.

share|improve this question
up vote 2 down vote accepted

To expand on Hubert Grzeskowiak's answer the custom data attribute is a good option for you as you can continue specifying content in the markup as it should.

But there is a way with CSS to display it with the content property. Used on a pseudo element, you can choose to show it or not depending on viewport width with media queries.

This will allow you to :

  • minimize markup
  • change the content according to the viewport width
  • no use of JS
  • keep the content in the markup

DEMO

th {
    border: 1px solid #000;
    position:relative;
}
td {
    border: 1px solid #000;
}
.full:after{
    content: attr(data-state);
    display:none;
}
@media screen and (max-width:320px) {
    .full:after{
        position:absolute;
        top:0;left:0;
        width:100%; height:100%;
        background:#fff;
        display:block;
}
<table>
    <tr>
        <th class="full" data-state="CA">California</th>
        <th class="full" data-state="FL">Florida</th>
        <th class="full" data-state="TX">Texas</th>
        <th class="full" data-state="GA">Georgia</th>
    </tr>
    <tr>
        <td>Sacramento</td>
        <td>Tallahassee</td>
        <td>Austin</td>
        <td>Atlanta</td>
    </tr>
</table>

share|improve this answer
    
I really like this answer. Unfortunately, it displays both texts while in the "expanded" state. Is there a way to hide the data-state-value while it's not necessary to have it displayed? – Daniel Nov 25 '14 at 13:16
    
@Daniel Yes, you just need to add display:none to the pseudo element and display:block; in the media query like this : jsfiddle.net/webtiki/xmrkwajy/5 (edited that into the answer) – web-tiki Nov 25 '14 at 13:19
1  
Now it seems like the perfect solution for me. – Daniel Nov 25 '14 at 14:58
up vote 0 down vote

Your solution already is very elegant. An alternative would be saving the abbreviated texts as data attributes:

<th data-abbr="CA">California</th>

Unfortunately there's no way to switch the texts using CSS. So you'd need to use JS. In jQuery the switching would look something like this:

// if screen width below or above some value, switch inner html and data attr
$("[data-abbr]").each(function() {
    var abbr = $(this).data("abbr");
    $(this).data("abbr", $(this).html());
    $(this).html(abbr);
}
share|improve this answer
up vote -1 down vote

I don't see anything wrong with your approach. Using pure CSS is fine. A better question might be "Why abbreviate the state when the city names are not abbreviated?" What benefit do you gain from this abbreviation when the width of the table is constricted to the widest city name?

I know that question was perhaps too focused on the code you posted, because your solution is a good general solution for showing abbreviated text based on screen size, but the question is nonetheless applicable to your specific code.

share|improve this answer
    
My example is really just an example. In an actual usecase, the content following the headers should be handled accordingly. Actually, my first thought was, if it is somehow possible to use the abbreviation as soon as overflow: ellipsis takes effect. – Daniel Nov 25 '14 at 14:56
1  
Yes, yes there is something wrong with this approach. CSS is supposed to be an enhancement to your markup. The markup still needs to make sense on its own. All too often I see authors serving up pages with 2 sets of identical content with slightly different markup where 1 set is intended for only mobile users and the other for desktop. Duplicate content is not good design. – cimmanon Nov 26 '14 at 0:21

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.