Seems that hiding a element can be done 500 ways. I'm looking what what is best for browser compatibility standards, and possibly even performance...
This is what I wish to hide:
<li class="header-menu-user"><a class="header-user" href="/Settings/User/UserProfile">User Settings</a></li>
What I have tried in the past is for another scenario in which I did a display:none on a li with a data- attribute etc..
I just tried to do this and it is not working (not hiding it)
.header-user {
display: none;
}
There are many ways but one of these two usually is appropriate:
display: none;
Will hide the element, meaning surrounding elements will ignore it as if it were not in the DOM, even though it is and you can still target it.
opacity: 0;
Will essentially make the element transparent, not visible but it still occupies space in various layout models.
You can hide a specific <a> tag like this:
li.header-menu-user a[href^="/Settings"] { display: none; }
With just using CSS Display:none; would be the way to go. The only performance impact this is really having is that you are still sending all the content that is hidden to the client browser. If you want to improve performance perhaps consider removing the content on the server side if that is an option for you.
Related
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.
My idea is to use JavaScript to change the HTML content of <style> tag, in order to manipulate elements.
Assuming a table with 20,000 cells, i want to hide those who has the hide and hide-me-too class, instead of getting all the elements - i'll add/remove the HTML content
.hide-me-too, .hide{display:table-cell/none;}
of a style element in the page.
what i ask is: should i expect problems with different brwosers? performance? any-other-issue?
If you will try to manipulate the CSSOM to control 20,000 cells you have a problem.
Better if you manipulate the DOM and change classnames.
The any-other-issue, and the most important, is if you have a table structure (<table><tr><td>) and you show cells with display:block you will crash all your layout. The correct display value for cells is display: table-cell. So don't make a single show() or hide() with jQuery, change the classnames so look like this:
.showme {
display: table-cell;
}
.hide,
.hide-me-too {
display: none;
}
And it's another any-other-issue, that you hide some cells, the columns will not match, so you need to play with colspan. Will be hard. Good luck.
Context: making printable invoices to generate in a browser.
It's common in making printable webpages to use an #media print rule to change the way the content looks for a printed page. Ideally, because I'm printing only a small part of the page, I'd like to hide everything and then display the contents of a particular element.
Structure is something like this:
<body>
<div id="topMenu">...lots of elements...</div>
<div id="sideMenu">...lots more...</div>
<div class="tools">...some tools...</div>
<div class="printing">...some elements I want to print...</div>
<div class="tools">...more stuff I don't want to print...</div>
</body>
Stuff I've tried:
Ideally, I'd like to do something like
body * {
display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
display: block !important;
}
But this won't work because some elements need to be inline and some need to be block. I've played with some different values for display from MDN and can't find one that easily resets the value to its original. display: initial seems to be treated like inline.
The suggestion in CSS: "display: auto;"? seems to only work for JS.
Of course, it is possible to explicity "hide" the stuff I don't want printed rather than display the stuff I do want, but it seems to me that it should be possible to go the other way.
In this question How to only show certain parts with CSS for Print? suggests body *:not(.printable *) {display:none;} but notes (as backed up on the w3 negation page ) that this is not yet supported.
I note that the w3 draft and the display-outside page seem to recommend using an unknown (to webkit) box-suppress property to preserve the display value while not displaying the element.
My questions:
What is the best way to hide everything and target certain elements for display when they don't all share a common display property?
What exactly does box-suppress do?
Since you specifically tagged this CSS3, try using CSS3!
body>:not(.printing) {
display: none;
}
This should work for the example you gave. I hope it works for your real-world application!
To answer your auxiliary question, as of October 2014, box-suppress is a possible future replacement for display:none that will hopefully make it easier to both hide and remove elements from the flow without worrying about changing its display type (as opposed to visibility still keeps it in the flow, and position:absolute which still keeps it visible). I don't think it's currently supported so I'd stay away from it for now. If you want to know more, see http://w3.org/TR/css-display
You cannot use display for this purpose. See Display HTML child element when parent element is display:none
However, you can use visibility, as long as you use absolute positioning for the hidden content:
body, body * {
visibility: hidden;
position: absolute;
}
.printing, .printing * {
visibility: visible;
position: relative;
}
If you don't use any absolute or fixed elements, you can use an alternative way of hiding elements.
Instead of using display: none to hide your elements, try using:
body * {
position:absolute;
top: -999999px;
left: -999999px;
}
To set it back use:
.printing, .printing * {
position: initial;
/* OR */
position: static;
}
He guys, right now im working on a conversion-page that is supposed to be included on websites of our partners. We're given a certain space inside their websites to promote our product. The space we're offered is of course supposed to be styled with html and css. And this is where it gets a little complicated. Is there a smart way to prevent our stuff inside their html-structures to be formated by their css?
Sure, I could check all affecting formations and just overwrite them with our own css-formations, but this is pretty dirty and not very reliable in terms of possible changes in the future.
How would you handle this? Might iFrame be a valid solution?
Thanks
Without an iframe you can use a special application of the universal reset concept.
/* cssreset.com */
#your_company_div * {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
line-height: 1.5em;
text-decoration: none;
vertical-align: baseline;
/* and perhaps some more... */
background: white;
color: black;
}
You may want to explicitly define the font/family as well, unless you just want to use theirs to make it fit in better.
The idea here is basically that it shouldn't matter anymore what the parent website has defined for CSS styling, your content should look the same basically no matter what, because the * trumps all.
Note that there is the same sorts of downside with using a universal reset, in that you nuke inheritance and will have to do define margins and padding if you want a non-zero value.
This shouldn't be that big of a downside for you as you are not so much designing a whole web site, and thus for a little extra work up front it won't matter how they change their site, your block will stay mostly the same.
If you use Iframe then can invoke your page as external in your partners website with your own stand alone style. Else give a hierarchy style to the div and its child elements
I have a form where depending on the website's brand one of two input fields should be visible at one given spot.
I figured I just put both input fields in the same container and then through my stylesheet set one of them to display:none;
This does hide the field, but it still makes it take up space.
I also tried setting the height and width to 0 or setting visibility to hidden or collapse but none of those worked.
Untill now all the branding things could be done with css style sheets so I would like to keep it that way.
The solution should at least be supported in IE6 & up, Firefox 2 & up and Chrome (latest).
why don't you use input type="hidden" ?
What about setting the invisible input field to position: absolute; which should take it out of the rendering flow.
However, setting it to display: none should in theory do the same...
<style>
.hideme
{
display:none;
visibility:hidden;
}
.showme
{
display:inline;
visibility:visible;
}
</style>
<input type="text" name="mytext" class="hideme">
You can either set class="hideme" to hide your control or class="showme" to show your control. You can set this toggeling using JavaScript or server side coding.
This does hide the field, but it still
makes it take up space.
This shouldn't happen; display: none should cause the element to not be included in the flow. Check the rest of your CSS (try using Firebug to figure out where the extra "space", which is probably just padding or margin of some surrounding element, is coming from).
Using the visibility property takes up rendering space even if the element is not visible. Instead of using visivility you have to use display property.
You can set the display to none if you want to hide the element and display to block or inline if you want to show them.
To have a look on display check this
If setting your display property doesn't solve your problem, then I think the textboxes might be absolutely positioned. It might be the reason for the layout not to be changed.
Can you please post the complete code?
You can do this if you want to isolate the css code from other input:
input[type="checkbox"] {
display: none;
}
You can also further isolate it from the same type by indicating another class.
I'm not too familiar with CSS, but you can try implementing JQuery which combines Javascript and CSS to let you do stuff like that with relative ease.