Today I was trying to create a dummy css rule for testing and investigation.
.dummy {
some-style : somevalue;
}
Ideally the class should have no visible effect. I want to be able to apply the class to elements but cause the least visible effect possible on any elements it is applied to. For example
<div class="dummy"> should look and behaves as much as possible like <div>
I did not want the class to be empty. Can anyone suggest a style that I could add to the class that would have the least visible impact when applied to a general html element? I can't think of anything completely harmless.
UPDATE: I wanted to add the style to some existing html. The reason was to use the style as a marker for diagnostic purposes. It would help me see when and where styles and stylesheets were getting loaded/cached and where and why some styles were getting overridden, sometimes by the browser defaults which seemed odd. At the time I didn't have exclusive use of the system I was working on so I wanted something that was going to be invisible to other users but I could see in Developer Tools.
UPDATE 2 : the html/css wasn't written by me and I didn't have my own environment in which to work. I was trying to investigate some problems in-situ in someone else's system. I had tried using DevTools in the browser but wasn't getting anywhere with that. I wanted to be able to make some small changes to their html/css to aid my diagnostics. I didn't want them to have any obvious effect on the system for other people (except in DevTools, viewed by me).
It was a Wordpress site and they only had two environments, one for live and one for testing. I was working with the test system. There were other people testing at the time, though mainly checking content.
The real thorny problem was why was the font-size in the calendar widget much larger than everything else on the site? Inspecting using DevTools I could see the font-size style was getting overridden by the browser default style when it seemed to me there were other css selectors that should have taken precedence. It looked bizarre. In the end it turned out to be a missing !DOCTYPE tag in the html. So nothing to do with the css itself.
I didn't like this way of working, fiddling in someone's system, but there wasn't much else to do and it did help to resolve the problem for them.
Hopefully I don't have to do this again, but ever since I have been wondering what was the most harmless style that I could have used?
I thought I would ask here as there must be people who know CSS better than me.
You can use this:
.dummy{
min-width: 0;
min-height: 0;
}
If you just need anything beeing set you could assign rules that are default anyway. For block elements like div set
.block-class { display: block; }
And for inline elements like span
.inline-class { display: inline; }
Of course it could be an issue doing so in some rare cases but in general it's quite harmless I guess.
In principle, for any property you can have an arrangement like this:
div {
some-style : a-valid-value-for-some-style;
}
.dummy {
some-style : a-different-valid-value-for-some-style;
}
And .dummy's style will have an effect, no matter what some-style is.
Your best bet is to make use of CSS variables. These are custom properties and start with a double hyphen. so
.dummy {
--dummy-style: foo;
}
will make --dummy-style a property with value "foo". So long as you don't employ the variable as the value in another property, it will have no visible effect.
Related
I'm currently working on an online code editor. (like jsfiddle codepen etc...)
I got everything working, but I ran into one problem; If a user does something like this:
button {
background-color: red;
}
It also changes the properties of my "run code" and "reset" button I made.
same thing with other things like a div;
div {
padding: 500em;
}
because this will also change the div's Im using in my own code.
I fixed the issue using !importand tags after every line in my css but I'm wordering if there is any other way to fix this? or is !importand really the only way.
As said in the comment by CBroe. To do this you can use iframe.
A more original solution would be to create a web component with a shadow root (which isolate the style too). The support for this is not too bad even if it's fairly new :
But, I've used it myself and it's a little bit harder to understand at first
I'm currently trying to override a piece of styling made earlier in my code to my section-header with the padding, but having difficulty in doing so. I'm trying to center the section header on desktop sizess only.
My original section-header is like this:
.section-header {
padding-left: 10%;
}
And my media query is like this:
#media #{$desktop} {
.section-header {
padding-left: 0;
text-align: center;
}
}
I've already used !important but my mentor tells me to avoid it. How can I override this and make this change?
CSS works in multiple ways and can become a mess which is why your mentor mentioned not using "!important" where possible.
One thing to note is if your section rule is after your media query rule, it will override the media query rule.
Also, consider specificity. The more specific you are with your targeting the more important that rule is.
Quick question. Have you opened it up in Inspect to see whether it's even showing? So possible cache clear issue etc?
If it shows in inspect element, it might worth checking whether there is something with higher specificity overriding it.
It's hard to give a fix above the above without seeing but that won't be accepted on here...
I am trying to get the blue rectangle container to have a larger z-index than the other boxes when hovering over elements that overflow the container.
Game 3 here has the larger z-index, but I want to access the Loser select in the blue circle below, however I can't, unless I hover back over the blue rectangle to gain focus.
Is there a way around this where it can be handled with just CSS or do I need JQuery?
I created a Fiddle that can replicate this so ignore any JS errors as the actual page requires quite a bit of includes, however the issue is in tact. Hover over the 4th game which has three dropdowns, Source, Pools, Seeds. You can select Seeds just fine. However, hover over another game at the top then come back down to "Seeds", you can't select it unless you hover over "Pools" again. I need "Seeds" to always be selectable regardless of what the overflow is.
https://jsfiddle.net/cblaze22/qp4L15tj/8/
Current Code For Game Hover (Blue Rectangle area)
The .forward puts a large zindex on the blue rectangle area.
$(element).hover(
function () {
if (!$(this).parent().hasClass('editing')) {
$(this).addClass('forward');
}
},
function() {
$(this).removeClass('forward');
}
);
This was actually a surprisingly easy fix once you understood the structure and the actual problem. Div's covering div's. First you disable all click events on everything within .bracket-part as they aren't needed. Then you add the click events back onto the selects. To make it more generic for easier use again you can simple change select in the CSS selector a class .re-enable-events or something. The JS about z-index's wasnt actually needed.
#bracket-wrapper .bracket-part select {
pointer-events: all !important;
}
#bracket-wrapper .bracket-part {
pointer-events: none;
}
See: https://jsfiddle.net/uws8pf1y/
Pointer events has a very good compatibility rate so this solution should be fine across pretty much all devices.
To get straight to the point: There is no clean CSS-only solution to your problem.
Since all your elements are pretty much identical (and by that I mean the class for example) you will not find a solution that covers all configurations. Since they do not differ from each other they all have the same z-index but not the same stacking context. Unless you give their parents a different z-index or change the stacking context you will not be able to access the blocked element. It also comes down to how limited you are with changing the code. The code looks like it has been build by JS and you just copied it to your fiddle for us to test.
Attempt #1
Attempt #1 is to just add high z-index directly to the according parent.
#mmshr already tried to do this. However, he tried to give the whole class a high z-index which is not gonna work out of course as you've already pointed out.
You could however try to only give this element a high z-index element in its style attribute. This comes down to how limited you are with changing the code. You could theoretically use JQuery for this but the way you would select the element (e.g. by nth-child()) brings me to Attempt #2 which uses the same pseudo-class and is a CSS-only attempt so using JS is nonsense in this case. By the way if you can change your code like this you could remove your little JQuery function that adds the forward class on hover.
Attempt #2
This attempt works fine and you are not limited by the ability to change code since this is pretty much one line of CSS. As already stated in Attempt #1 you could use a pseudo-class to select this element. However, this is not valid for all configurations. If you would add one element (<div data-bind="template: { name: 'bracket-template', data: $data }">...</div>) before your blocked element you would have to change your CSS each time. But if there is no need for changing elements and configurations (or at least not the order) this is a valid solution:
#bracket-wrapper > div > div:nth-child(8) > div > div {
z-index: 2 !important;
}
In this attempt you can (and have to) remove your little JQuery function too:
$('.bracket-part').hover(
function() {
debugger;
$(this).addClass('forward');
},
function() {
$(this).removeClass('forward');
}
);
Remove the entire thing.
Attempt #3
Probably the cleanest and best attempt is to use the stacking context. The stacking context is explained right here. But to give you a simple overview (W3C):
Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.
Most important is this part because it applies to your structure:
Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.
If you take a look at your HTML tree you will find the following:
According to the stacking-context we should be able to give your element in the background a higher stacking-order then your element in the front by changing the order of those elements in your tree.
It is just a guess but you probably have something like an array where you store the data and some JS-file builds a tournament bracket out of it. If you could somehow change the order of those two elements (for example by changing the order of your array) you would not use CSS and would not use any additional JQuery.
What if none of these work?
Well, then I do not see any solution that requires only CSS.
I also thought about a possible JS solution but this is a tough one and I couldn't figure out a (simple) solution. Let me explain the problem:
Since your select is behind a div element JQuery would not recognize it (e.g.) on hover so you would have to use pseudo-classes again which I already covered with a CSS-only attempt.
I also thought about adding a z-index of -1 to the blocking element, because JQuery could recognize it on hover. But this leads to problems too: the blocking element is now in the background and the blocked element in the front and you can also click it. The problem is that the (former) blocking element is now behind the #bracket-wrapper. This is also not a valid solution because you would have to use a pseudo-class again to target this specific element.
Conclusion
I am gonna be honest with you: This tournament tree is poorly designed and structured. There shouldn't be overlapping elements or elements outside of a container and certainly not both in combination. If none of my attempts are suitable I do not see any CSS or JS solution. At least not a simple one. You have provided little information about how the tournament tree is build but things could change if you do.
At this state I think rebuilding this whole structure is the only really clean solution.
Edit
Solution #1 by #Deckerz
#Deckerz provided a great solution which does not focus on the z-index. Instead, it uses pointer-events. I tried this approach but failed because I forgot an important part. The logic behind it is simple:
First you disable all click events on everything within .bracket-part as they arent needed. Then you add the click events back onto the selects. To make it more generic for easier use again you can simple change select in the CSS selector a class .re-enable-events or something. The JS about z-index's wasnt actually needed.
#bracket-wrapper .bracket-part select {
pointer-events: all !important;
}
#bracket-wrapper .bracket-part {
pointer-events: none;
}
However, this is still a workaround. I still recommend restructuring your code and CSS.
If you want Seeds to always be selectable, why not always give it's bracket-part parent a high z-index?
Right now, the z-index is only high after the bracket-part is hovered. Although Seeds is technically a child of the bracket-part, it is positioned outside of it, so unless the Seeds select is hovered directly after bracket-part is hovered then it won't be selectable.
If you add z-index: 10000; to Seeds' bracket-part parent styles, Seeds will always be selectable:
<div class="part bracket-part ui-draggable ui-resizable ui-draggable-disabled ui-state-disabled" data-bind="bracketPartInit: { left: $data.left, top: $data.top, height: $data.height, width: $data.width, disabled: $root.members.bracket.disableDrag, minHeight: $data.minHeight }, css: { 'dash-top' : $data.dashedBorderTop(), 'dash-right' : $data.dashedBorderRight(), 'dash-bottom' : $data.dashedBorderBottom(), 'dash-left' : $data.dashedBorderLeft(), 'reverse-bracket' : $data.type() == 2, 'box-bracket': $data.type() == 13, 'bye': $data.bye()}" aria-disabled="true" style="top: 459px; left: 0px; height: 80px; width: 150px; z-index: 10000;">
I have made a complete Bootstrap grid system. I am now uploading my code to a CMS system, and can see there is some CSS from the backend, there is messing up my grid.
If I untick the following code in the inspector window, everything is looking perfect. When the following code is ticked in the inspector window everything is messed up. Is it possible to overwrite this code somehow, so the class is not used?
.cms-area img {
width: 100%;
}
You can use !important in such cases but use it sparingly. Best is to remove the unwanted code and not use !important. !important might cause issues later that are difficult to debug. If possible include your css after other css is included in the code. In CSS, rules that appear later take precedence over earlier rules
Edit:
Set width to auto instead of 100% to fix your alignment issue
Below given is the ideal way to manage css since it allows you to attribute your style content and lets you override the style already applied elsewhere.
.cms-area .your-class img {
width: <your choice>;
}
I have a weird one that I can't seem to be able to figure out. I am new to CSS and decided to use bootstrap to assist with styles etc.
the problem I have is when I try to assign two classes to a div element, 1 being the bootstrap column and another from my own stylesheet.
the code from my stylesheet seems to be ignored in some cases. now i have taken that one bit of code and css out and put it into the jsfiddle but it works fine. its only when combined with the rest of the html does it seem to have issues. also note that if i use inline styles it works...
I copied the entire code to js fiddle now so that you guys can replicate the issue. the section I am having issues with is the 4 images that are side by side
class="services-boxes"
anyway any assistance will be appreciated, as well as general feedback as I am new to this all! :)
https://jsfiddle.net/d9bv0grx/1/
Due to the way cascading style sheets work it (styles are be applied in order AND by specificity). It is most likely that styles you are expecting to see are being overridden by specificity.
Give this guide a read.
An example is that for <div id="selector">
#selector {background-color:red;}
div {background-color:green;}
You can expect to see a div with a red background, even though the green background is set afterwards, the id selector has greater specificity.
Then try and alter the specificity of your selectors in your css so that they will take precedence over in bootstrap.
Also just going to add, you have casing issues - you declare the class with lowercase in css, capitalised in your html.
You also have syntax issues in your css. Your css should look like:
.services-boxes {
padding:0;
max-height:500px;
width:100%;
}
Sort all this and you should be golden! jsfiddle
Looks like a combination of syntax errors. Your style should be declared like this:
.services-boxes {
padding:0px;
max-height: 500PX;
width:100%;
}
Note that the class is all lowercase (which should match style where declared which is currently Services-Boxes), a colon separating property and value (you has used = in some instances) and one set of curly braces per declaration (the above class .logo-image has 2 closing braces). Just a bit of formatting should see your code recognised
When you don't have total control over your HTML, you can use the !important property in css to give a priority to your styles.
.services-boxes {
color: red !important;
}
However keep in mind that you have to avoid the !important property as much as possible and do not use it unless you can't do it any other way.