Responsive CSS, abbreviated content

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:



CaliforniaCA
FloridaFL
TexasTX
GeorgiaGA

Sacramento
Tallahassee
Austin
Atlanta



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.

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;
}


California
Florida
Texas
Georgia


Sacramento
Tallahassee
Austin
Atlanta



StackExchange Code Review Q#70765, answer score: 6