I don't have much experience on UI development. I have a class defined in CSS, something like this-
.myclass {
color: red;
content: "my content";
font-size: 12px;
padding-right: 2px;
}
I want "my content" value to be internationalized (to be displayed as my content in English and something else in another language). Is that possible achieve it through CSS code?
I would suggest to separate your localization from CSS, since it is primarily meant for styling and you'll be probably localizing the HTML anyway. If it is possible for your to add another attribute to your HTML you could try using content with an attr() value to reference a data attribute from the selected HTML content. So with HTML like this:
<div class="myclass" data-value="My Content"></div>
You can access the data attribute like this:
.myclass:before {
content: attr(data-value);
}
Keep in mind that the content property can only be used on pseudo elements. For further info I'd recommend you the MDN page about the content property.
I am not sure about it but most probably you are looking for this
http://www.w3.org/International/questions/qa-css-lang
The best way to style content by language in HTML is to use the :lang selector in your CSS style sheet. For example:
:lang(ta) {
font-family: Latha, "Tamil MN", serif;
font-size: 120%;
}
You could consider using CSS variables (i.e. var() with custom properties), if it blends in with your surroundings:
:root{
--text-my-content: "my content";
}
.myclass{
content: var(--text-my-content);
}
Thus, the localized portion is outsourced from the actual style. Now, you can define the locales elsewhere (e.g. generated from a text database or hard-wired in an i18n-only CSS file or even grouped together on the top of your stylesheet):
html[lang="de"]:root{ --text-my-content: "mein Inhalt"; }
html[lang="en"]:root{ --text-my-content: "my content"; }
html[lang="fr"]:root{ --text-my-content: "mon contenu"; }
Related
I'm beginning to learn more about CSS formatting and now I've picked up ABEM to use along with SCSS to develop a WordPress site.
Is it then valid to add a modifier directly to let's say an h1 block? Like this:
HTML
<h1 class="-green">To make the text green.</h1>
CSS
.-green {
color: green;
}
Or do I need to add a block or an element before to modify it instead?
Like this:
HTML
<h1 class="a-heading_text -green">To make the text green.</h1>
CSS
.a-heading_text.-green {
color: green;
}
ABEM is a BEM variant and a lonely modifier wouldn't be BEM-compliant. Your second option is the right one: you "need to add a block or an element before to modify it instead".
If you want to create a standalone helper for a simple purpose, then it is not a modifier but a block:
<h1 class="green">To make the text green.</h1>
With the CSS:
.green {
color: green;
}
This helper block can of course be mixed with other blocks or elements. The following code is valid:
<h1 class="a-heading_text green">To make the heading text green.</h1>
I'm developing a web based source code editor. I'm thinking of adding support for themes (syntax highlighting).
//Default theme
.default-reserved-word
{
background-color : red;
}
//Some other theme
.monokai-reserved-word
{
background-color : green;
}
inside the editor each syntax highlightable word is surrounded by a span tag with the appropriate class:
....
<span class="default-reserved-word">def</span>method name
...
which I want to convert to (when the user clicks a "change theme" button)
....
<span class="monokai-reserved-word">def</span>method name
...
Is there a simple way of switching these CSS rules without going through all the elements and modifying the class attributes?
(FWIW, I need to support IE7+, FF3.6+)
I'd suggest using a different method, perhaps have a theme class on a higher parent container:
<div class="theme-default">
And then use CSS like this:
.theme-default .reserved-word {
color: blue;
}
Whilst this method is not exactly what you've asked for it will simplify the process of changing styles, for a start you won't have to search through loads of spans, finding the current class of theme-name + ' -reserved-word' (etc) and doing a string replace on them.
Add a class name to the root element (<html>) and change that on use input.
.theme1 .reserved-word { color: red; }
.theme2 .reserved-word { color: green; }
and then change
<html class="theme1">
to
<html class="theme2">
with Javascript.
You can use jQuery for that:
var elements = $('.default-reserved-word')
elements.removeClass('default-reserved-word');
elements.addClass('monokai-reserved-word');
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Should css class names like 'floatleft' that directly describe the attached style be avoided?
I was wondering what the best practices were for the naming and usage of CSS classes.
For instance, in a scenario where you want to center the text of both the button text and the header text, is it better to repeat this style in both classes like
.button-text {
text-align: center;
/*some properties*/
}
.header-text {
text-align: center;
/*other properties*/
}
Or is it better practice to move that style out into a separate class like
.center {
text-align: center;
}
.button-text {
/*some properties*/
}
.header-text {
/*other properties*/
}
and have the class of "center" applied to elements that have the classes of "button-text" and "header-text".
What it comes down to, is, should CSS class names represent what an element is "button-text" or "state, what an element looks like "center"?
Thanks!
A CSS class should represent what you use the element for, not what the element looks like.
Consider that you have headers that are red and bold, and change the design to large blue letters instead. If you named your classes after the look of the headers, you end up with:
.RedBold {
color: blue;
font-size: 200%;
}
Having a class named center is definitely the wrong approach - this class name already implies the presentation, that's not the point of defining presentation in a separate file. A better way to avoid code duplication would be:
.button-text, .header-text {
text-align: center;
}
.button-text {
/*some properties*/
}
.header-text {
/*other properties*/
}
Another option is specifying multiple classes, e.g. class="button text" instead of class="button-text". This gives you:
.text {
text-align: center;
}
.button.text {
/*some properties*/
}
.header.text {
/*other properties*/
}
Unfortunately, this approach has to be ruled out if you need to support MSIE 6.0, all other browsers (including newer MSIE versions) deal with multiple classes correctly. As other people already noted which solution you choose is mainly a question of maintenance - choose the one that will be easier to change and adapt to new requirements.
Maintainability is king. Whatever you find most easy to maintain - in my opinion, this is your second example.
It depends how much you will center text, the issue with the second point is that you could then end up with a long list of classes added to each element in your HTML which isn't so clean.
If these happen in, for example, a p tag a lot, then you'd possibly be better off putting one class in the parent so the children can inherit it.
i tend to group items together example like
.button-text, .header-text{
text-align:center
}
then if they need something unique add that to another
ie
.button-text{
font-size:22px;
}
.header-text{
font-size:44px;
}
class name's should be usefull but its not a biggie, just ensure they are unique. Often i name things based on their hierarchy within a page or section, as to prevent any accidental duplication.
I've got CSS on my links depending what type of link it is. In this case it's password protected, and external link.
So I've got CSS like this:
a.external-link:after { padding-left: 2px; content: url(../images/icon-external-link.gif); }
a.restricted-link:after { padding-left: 2px; content: url(../images/icon-lock.png);}
However when I try something like this:
<a class="external-link restricted-link" href="some link">Some Link</a>
It only displays the last icon, in this case the icon-lock.png. Which makes sense, since the content value can only be set once not combined, so the last class declaration is overwriting it. Is there anyway to combine these two so I can mix and match these link classes easily (I've got 4 total). I don't want to make separate classes/images for each combo.
Hate to break it to you, but you're going to have to make separate classes/images for each combo. Especially as there would be no way of knowing which content should go first.
a.external-link.restricted-link:after
{
content: url(ext) url(res);
}
vs
a.external-link.restricted-link:after
{
content: url(res) url(ext);
}
I wrote some dummy css. Instead of a tag I got escaped characters. How can I add a div tag instead?
.HeaderName:after{
content: "<div class=\"Name2\">text</div>";
}
.Name2 {
color: red;
}
The content declaration cannot add tags to the page (tags are structural); additionally, CSS is meant for presentation changes, not structural content changes.
Consider using jQuery, instead, such as:
$(".HeaderName").after("your html here");
If you need that extra tag only to make the added text red, just do this:
.HeaderName:after{
content: "text";
color:red;
}
Tested on Chrome.
You can't insert tags using content: in CSS. Here is the relevant part of the spec; see the 'content' property in the CSS 2.1 spec.