I have an HTML django template page that is both RTL and LTR (depends on user's locale).
The CSS of this page is stored in another file, and that file is currently static.
What is the best way to switch the attribute left and right according to the locale? Is there a built in attribute in CSS for this problem? (I don't want to use JS, it feels too messy)
I have:
.elem{
left: 10px;
bottom: 10px;
position: absolute;
}
I want something like this:
.elem{
right-or-left-according-to-html-dir: 10px;
bottom: 10px;
position: absolute;
}
Currently the only option I can think of is turning the file into a template also:
.elem{
{{dir}}: 10px;
bottom: 10px;
position: absolute;
}
Is there a better way that will let me keep my CSS file static?
You say you're making the document rtl or ltr depending on locale. In that case you can use the :lang() selector to make certain parts of your document have styling depending on the locale.
http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:lang
http://www.w3.org/TR/css3-selectors/#lang-pseudo
If you want a little more support (IE7+) you could use the attribute selector selector[lang='en'] though that will only test the attribute on the specified selector.
http://www.w3.org/TR/css3-selectors/#attribute-selectors
If you specify the language in the html element (which you should, with lang="en" for example) you can just put the html selector in front of the class you want to apply in certain locales:
.elem {
margin: 0 10px 0 0;
color: blue;
}
html[lang='en'] .elem {
margin: 0 0 0 10px;
}
Even better, if you specified the dir attribute you can directly use that in css like so:
.elem[dir='rtl'] {
margin: 0 10px 0 0;
}
Please note that with a class on the body element you will always depend on that class always being there. But the dir and lang attribute can be specified on a more specific scope, like a single div, and still be used in the css along with styles for the 'other' reading directions.
Edit
Lastly, to gaze into the future, the CSS Selectors 'Level 4' will include a psuedo tag which will be able to filter on text directionality. Of course the specs are in development and adoption by browsers may take years before it is possible to reliably use it:
http://dev.w3.org/csswg/selectors4/#dir-pseudo
How about adding the direction to your body element via a special class, then you can write according selectors:
<body class="rtl">
and in the CSS:
.rtl .myclass {
text-align: right;
}
Related
I want the left css property to take the value from the html element using attr like this
<div left-value="30px"/>
div{
left: attr(left-value);
}
is this even possible? it works with after and before.
The attr css function is appearently very powerful but yet very limited as described here:
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
Note: The attr() function can be used with any CSS property, but
support for properties other than content is experimental, and support
for the type-or-unit parameter is sparse.
Anyway there's a trick you can use to get quite the same result but using css custom properties. Instead of defining an attribute on the html element that you are going to read in your css rule using attr, you can just set that same value on a custom property using the inline styling. Then in your rule just use that custom property to set the left properrty of the element.
Here I also put a container with position relative, to better highlight the correct working of this solution:
.container{
position: relative;
border: dashed 4px lightgray;
height: 100vh;
width: 100vw;
}
.container > div{
position: absolute;
left: var(--left-value);
border: solid 1px gray;
background: red;
width: 20px;
height: 20px;
}
<div class="container">
<div style="--left-value: 20px;"></div>
</div>
Of course it doesn't look very smart to use a custom property instead of using directly the left property since you are using the inline styling already. There are cases when this solution could be the way to go.. but here indeed it's not really changing the game
First-of-all there is no such attribute as left-value in HTML. You have to use pre-build attr in HTML cuzz it's not react. Secondly if you want to left align the just simply use position and left attr of css or just do some styling using margin-left.
I wanted the CSS to apply to all the pages except for one, which is where the :not() comes in.
Now the problem is that the page I want to exclude is neither a page nor a post, so it does not have an ID I can use; it is a page created by a plugin, and the original "post" is actually a property (I use a property management plugin, so when I add a property, the plugin creates a single page for it visible on the website). I tried everything I could but could not find how to select this page, even though the inspect element shows it as post-id-2114.
Is there a way where I could use the URL to exclude it from the CSS? Or anything else that would work?
CSS
.single-property-image-thumb ***:not(.??)*** {
max-width: 90%;
margin: auto;
margin-bottom: -20px;
}
Due to comments above, I try if I understand it well.
/* for all pages */
.single-property-image-thumb {
max-width: 90%;
margin: auto;
margin-bottom: -20px;
}
/* different styles for https://cia-agency.co.uk/property/clifton-court-northwick-terrace-london-nw8/
.postid-2114 is class on body element */
.postid-2114 .single-property-image-thumb {
/* there will be styles just for linked page */
margin-bottom: 0;
}
If I have an exemplary div:
#div {
max-height: 100px;
height: auto
}
vs.
#div {
height: auto;
max-height: 100px;
}
Does it make an difference in an output file?
Order does matter in some cases. For instance, when using vendor-prefixed versions together with W3 compliant properties.
-webkit-transform: ;
transform ;
vs.
transform: ;
-webkit-transform: ;
The browser will use the last property. So always use the W3C compliant property last if it's available!
in your scenario no. But others yes. For example:
.add-margin {
margin: 0;
margin-left: 5px /** element will have 5px on left margin **/
}
vs
.add-margin {
margin-left: 5px;
margin: 0 /** element will have no margins **/
}
as a general rule of thumb, I place all my properties alphabetically unless a special case is needed - this ensures overrides get added correctly (as in case of my first example of code)
As per your scenario properties order not matter.
Most of the developers has no specific plan when it comes to ordering CSS. But I personally suggest a method based on how much impact they have on the selected elements or other elements around them.
Layout Properties (position, float, clear, display)
Box Model Properties (width, height, margin, padding)
Visual Properties (color,background,border,box-shadow)
Typography Properties (font-size,font-family,text-align,text-transform)
Misc Properties (cursor,overflow,z-index)
I came to read this during my research on some css coding standards. You could read more here
No, Properties order does not matter until and unless you are not modifying the same property and you want to switch between the available two or many.
Example:
#div{
color: red;
height: auto;
max-height: 20px;
}
#div{
color: blue;
}
So, in this case, the colour properties are replaced by the last one and the colour will be blue but for the height and max-height the same properties which are assigned in the first place will be reflected and until and unless they are not overwritten.
I'm using the James Dean of sticky footers. It requires styles to be applied to the <html>, <body> and <footer>. Now I'm using sass to write my css, and I'd like to implement this footer as modular as possible. Preferably like this for example:
footer {#extend %sticky-footer;}
However, if I do that I would still need to style the <html> and <body> tags. Scss does not have some sort of parent selector for that that I can use as far as I know. So is there a way to do this with sass (in scss) in a modular way, preferably with #extend? (there is an example on codepen)
To be clear: I'm not asking for a parent selector. I'm asking for a modular way to implement this footer with scss.
This is not possible. Sass is strictly a language that is compiled to CSS, it has no knowledge of the DOM and makes no assumptions about your markup. What you're asking for would have to be a function of CSS in order for this to work.
There is a parent selector in CSS, but it is not supported in any browser at this time.
The closest you can get is something like this:
html%sticky-footer {
position: relative;
}
body%sticky-footer {
margin: 0 0 100px 0;
}
footer%sticky-footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
html, body, footer {
#extend %sticky-footer;
}
I have a css file with styles:
button-text-only {
padding: .4em 1em;
}
.ui-buttonse {
margin-right: 7px;
}
.ui-datepicker {
left: 2px;
}
... and etc ...
How can I do so that css styles are actualy inside container with id = "date_catr"?
There are a few of ways that I think you can approach this, as has been stated you can prefix the rules with the container ID, e.g.
#date_catr button-text-only {
padding: .4em 1em;
}
#date_catr .ui-buttonse {
margin-right: 7px;
}
#date_catr .ui-datepicker {
left: 2px;
}
etc.
Unfortunately if you have to apply this to 50-100 styles this adds a fair bit of uneeded CSS and may ever so slightly reduce the speed at which the css is applied (which will be more noticeable on mobile devices).
The problem is, apart from the above there are very few ways to actually do what you want.
You could use scoped styles, this sounds like a great idea, until you realise Firefox is literlly the only browser that currently supports this (and by the looks of it, the only browser to support it into the foreseeable future).
You could also try to include your HTML via an iframe, with your intended CSS inline inside said iframe, CSS inside the iframe only applies inside the iframe, and css applied to the page doesn't effect any content inside the iframe. This is basically like the scoped styles solution described above except it has full browser support.
Iframes could however get a bit messy, add unnecessary bloat to the page and be a bit of a pain to maintain.
The only other solution I can think of is prefixing the css and changing it in the css, this means the css doesn't really get much bigger, and also ensures that the speed at which the css is applied shouldn't be effected, this could however be messy and cumbersome to maintain, I'm not sure if you want the elements to inherit base styles from the classes you've posted ... regardless it might look like so:
.i-button-text-only {
padding: .4em 1em;
}
.i-ui-buttonse {
margin-right: 7px;
}
.i-ui-datepicker {
left: 2px;
}
etc.
Personally I'd go for option one, maybe with a class so that you don't have to deal with specificity issues later down the line. You'll end up with a little bit of slowness, but it should be pretty unnoticeable (hopefully)
Prefix every rule above with #date_catr like this:
#date_catr button-text-only {
padding: .4em 1em;
}