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.
Related
So I'm completely familiar with overriding a style in bootstrap by using my own Style.css. But let's say that bootstrap has a style that is put on a table or something that is a standard html element. Let's use labels, because it's a rather short example. Let's first assume that there is no other label style or label element styling anywhere else except for the following css code:
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
Now if I want to override this style in my Style.css file and change the margin and weight, I could do this:
label {
margin-bottom: 3px;
font-weight: normal;
}
Easy enough, this would change those two items and allow the other styles to cascade through. But what if I wanted to completely remove any styling added by bootstrap for the element label. Is there a short and easy way to do this without having to do something like:
label {
display: inline;
max-width: None;
color: none;
margin-bottom: 0;
font-weight: normal;
}
Or basically going through line by line and changing each styles property to something like none or normal or whatever? All while keeping the original Bootstrap file in an untouched state and not commenting anything out of it.
BTW I would also be fine with using JavaScript if it's concise and easy?
It depends on what browsers you want to support. You could use
label {
all: initial; // or all: unset
}
but be aware that it's not really widely supported yet. It works on IE 11, Firefox, Opera & Chrome, but not Safari or most mobile browsers. Still, a good one to know if and when it becomes more widely supported :)
No if it is already include the only way to override it is to give it properties like none, alternatively the best way to handle it is to use their SASS/LESS implementations and not include the component at all.
Let's assume we have this html:
<h2>TITLE</h2>
Is it possible, through the power of CSS alone, to make this either be or behave like:
<h2>T I T L E</h2>
Reason being that I want to justify the letters over a given width in the title, and I don't want to resort to serverside regular expression witchcraft before having properly evaluated the CSS options.
I already managed to justify the single letters through CSS using these rules:
h2 {
text-align: justify;
width: 200px; // for example
}
h2:after {
content: "";
display: inline-block;
width: 100%;
}
I've looked into text-replace, but there's no support in any major browser. Other than that, I've not yet found any hopeful candidate.
CSS3 would be ok if there's ok support, JS is not of any help.
UPDATE
letter-spacing is not an option since it has to adjust to the width dynamically AND I do not want to check browser implementation of kerning perpetually. But thanks to the guys suggesting it, I knew I had forgot something when formulating the question :)
Here's a jsfiddle for fiddling
Why not just use letter-spacing?
https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
A much easier way to do this would be to use the letter spacing css styling.
for example
h2 {
letter-spacing:10px;
}
Use CSS's letter-spacing:
h2 {
letter-spacing: 2em;
}
jsfiddle demo
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'm trying to alter the style of something based on wether or not its parent div is being overflown.
.pDiv { display: block; width: 300px; height: 100px; border: 1px solid rgb(0,0,0); }
.cDiv { display: block; padding 4px; border-bottom: 1px solid rgb(0,0,0);
.pDiv:overflow .cDiv { border-bottom: none; }
<div class="pDiv"><div class="cDiv">child 1</div><div class="cDiv">child 2</div><div class="cDiv">child 3</div><div class="cDiv">child 4</div><div class="cDiv">child 5</div></div>
is it possible to do something like this? I would use the last-child pseudo-selector, but the number of children can vary, so I want it to remove the border-bottom of the last-child ONLY IF the parent div is being overflown. I want a pure CSS solution too please, no JS!
CSS cannot select based on used or computed styles of any kind, so you're out of luck.
It seems a handy solution for this is being cooked up: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
According to css-tricks, the feature "#container brings us the ability to style elements based on the size of their parent container."
You should already be able to use it, but beware that not every browser supports this yet.
This way, you might (read the note) be able to get out with something like:
.parent-div {
max-height: 10rem;
overflow-y: auto;
container: size;
}
#container (min-height: 10rem) {
.parent-div:last-child {
border-bottom: none;
}
}
The main idea here being that if the element reached it's maximum height, then it's all but always overflowing — so we just apply the style so long as it's at it's maximum height.
Unfortunately, my own browser does not support this yet, so I can't guarantee you it would work the exact way as it is written above. But if you refer to the 2 pieces of documentation I provided, you should be able to come out on top 🤓
Note:
The css-tricks page also mentions that "Currently, you cannot use height-based container queries, using only the block axis". I'm hoping this simply means using the full size axis is necessary in this case, but I'm not able to test this.
If someone could verify whether this solution works and then leave a comment here, that would be very much appreciated. I'd edit this answer and credit the person.
I was wondering if it was possible to replace an image on an html page using the only the stylesheet. I know this is not common practice, but the only thing I have access to is the stylesheet and they used inline styles in the html. I have no way of editing the html file.
I inspected the element and it looks like this:
I'm trying to replace the "bullet_ball_glass_green" image. I was able to hide it by adding this to the stylesheet:
.rmLeftImage{
visibility: hidden;
}
But is it possible to replace the image or add another one on top of it without editing the html page?
You could set the background image of a div around the image (and keeping the css you have that hides the image).
.div_class{
background:url('http://yourdomain.com/yourimage.jpg') no-repeat 50% 50%;
width:100px;
height:100px;
}
the css have a higher hierarchy than the style in html, you could just add
img.rmLeftImage {
background-image: url('path to your image');
}
Keep hiding the image with
visibility:hidden;
since you want it to keep the width/height of the image and change the background image with
background:url('urltoyourimage')
Here is, perhaps a slightly controversial technique with support on IE8+ and pretty much every other browser.
.rmLeftImage {
content: '';
}
.rmLeftImage:after {
display: block;
content: '';
background: url(../your/new/image);
width: 220px; /* image width */
height: 240px; /* image height */
position: relative; /* image width */
}
See http://jsfiddle.net/z9QUu/2/ for an example. I've only tested this in chrome so far, where it appears to work. Providing it works cross-browser, you won't need to modify the HTML, at all.
Interestingly, I could only get it to work when applying content: ''; to .rmLeftImage, heres the jsfiddle without it: http://jsfiddle.net/Mw76h/, just for demonstration purposes.