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;
}
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.
In css we have something similair for :pseudo elements. According to this, it will come in the future. At the moment its not supported by any major browser http://caniuse.com/#feat=css3-attr
.test {
display: inline-block;
background-color: gray;
color: attr(data-color); /* Doens't work in css */
width: attr(data-width px);
}
.test:after {
content: attr(data-name);
}
<div class='test' data-name=" - CONTENT" data-color="#f00" data-width="200">test</div>
But what i want is, lets say ive the following div
<div data-color="#f00">...</div>
In LESS i want to be able to pick that color through the data attribute.
.example-class {
color: attr(data-color); /* Something like this */
}
Is this, or something similar, possible using LESS?
Considering that LESS compiles to CSS anyway, and therefore never knows about the HTML, that doesn't seem possible. That is the entire reason why the attr() function is in CSS, not LESS.
I have this css from bootstrap.min:
.rew {
margin-right: auto;
margin-left: auto;
margin-top: 20px;
width: 1050px;
}
.rew2 {
margin-right: auto;
margin-left: auto;
margin-top: 20px;
width: auto;
}
And my div like this (I've red examples from question and answer in stackoverflow):
<div class="rew rew2">
content.....
</div>
The (rew2) it's for responsived css, but before that I was wrote the css on my responsive css file, but it's not working the "div tag" always calls css from bootstrap.min css file. So I wrote two classes in the bootstrap.min css file, but not working also. The "div" tag only called the "rew" class and the "rew2" was ignored.
******** The class on responsive css file was deleted and I wrote the class on bootstrapmin css file
The differences it's only on width, if the site opened from desktop it would have 1050px width, and for the responsive (opened from smartphone) it will automatically adjust the template with the smartphone screen as "auto".
*Huft...I'm so confused why it's not working. I need help from you guys.
Thank you,
Best regards,
Kris
Why would you customize bootstraps .css file on your own? Just create your own rules and attach them to your div.
CSS stylings are always used one by one. So if you, for example, include your bootstrap.min.css file before your own styling rules, your own ones would overwrite all bootstrap stylings.
In other words:
First of all include bootstrap.min.css, then your own .css file.
Let's assume you've got this markup
<div class="foo bar"> </div>
You could style it through the 2 classes foo and bar.
.foo {
color: red;
}
.bar {
color: blue;
}
Using this would end up in the blue color, according to the declared order.
Let's even try to be a bit more specific.
You can also overwrite rules by using some more complex selectors.
.foo.bar {
color: black;
}
The above code would overwrite both of the previously defined rules, because they are 'stronger' selectors than a simple single-class selector.
Conclusion
If you want to overwrite bootstraps styling, try to stick to the order. If bootstrap uses some complex selectors and your custom ones won't trigger, try to use a bit more complex ones. Look here to learn more about complex selectors.
A little hint at the end:
Try to avoid !important! A rule, declared as !important, will overwrite all other rules, regardless of whatever you have declared up before.
Don't customize bootstrap.min.css create your own css file, In that you can write your own css as you need.As per you requirement include media query for smartphone in that give width: 100%; for that element.
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;
}
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;
}