By CSS sandbox I mean a section in my layout that have a completely independent look. I need this because some classes of mine need to output some "windows" of content in the layout, but I don't want the app's css to mess with them. They're mostly debug related, like printing var contents, benchmark graphs or displaying some error/exception.
Until now I was doing some kind of local reset, but this gets really annoying to avoid collisions and could fail if I forget some rules. ex:
html body div.eh-box {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
font-size: 100% !important;
vertical-align: baseline !important;
background-color: #fff !important;
font: 12px/12px 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
margin-bottom: 20px !important;
}
html body div.eh-box * {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
font-size: 100% !important;
font: inherit !important;
vertical-align: baseline !important;
color: #333 !important;
}
html body div.eh-box .title {
font-size: 50px !important;
line-height: 75px !important;
/*font-weight: bold !important;*/
}
html body div.eh-box .desc {
font-size: 24px !important;
line-height: 36px !important;
}
I don't know much about it, but I think thats more or less what Shadow DOM does
Another possible solution - depending on your application, is to load that layout section in an iframe - this way its a completely seperate document subject to a seperate set of styles. Not sure if I need to mention that there are certain drawbacks to using frames.
You can make a container element with an ID and then reset its rules (make sure this part is loaded last). The only problem you might encounter then are the !important rules, but you can use those in your reset part as well (not really recommended practice, but it will work).
Also, depending on the structure of your site, you might want to call your container element as specific as possible, like body #top_element #another_top_element #container in order to give it higher priority, but in most cases this won't be necessary...
There has been a technique called Scoped CSS
You can't use it [1] anymore but there is a polyfill [2] you can try.
[1] https://caniuse.com/#feat=style-scoped
[2] https://github.com/PM5544/scoped-polyfill
Related
As silly as this may sound but I can't seem to be able to customise the Labels' Header, in Blogger. I've tried various different methods and tags to achieve the look I want but it doesn't seem to work correctly. I've tried inserting CSS coding between the tags but to no avail. The following piece of coding hasn't worked either.
.post-labels {
letter-spacing: 0.09em !important;
font: arial 8px #666666 !important;
text-transform: uppercase !important;
margin: -1% 0% -1% 0% !important;
}
.post-labels a {
font-weight: normal!important;
text-decoration: none!important;
}
I have tried the following opening tags also but none of them seem to work:
#post-labels a {
#post-labels {
.post-labels a {
.post-labels {
And I've also tried adding "!important" at the end of each element however even that hasn't worked. What surprises me is that some elements seem to work whereas the others do not. For example the text-align, text-transform, font-weight and text-decoration elements work but the font (size, family & color), letter-spacing and margin elements do not. I've tried every possible variation I could possibly think of but I can't seem to achieve the look I want for the Labels' header.
The URL for my blog is as follows: http://www.blankesque.com
Any help would be appreciated. Thank you in advance.
Iram
You should use
font: arial 8px !important;
color: #666666 !important;
Instead of
font: arial 8px #666666 !important;
Because CSS Syntax for font property doesn't include the color. Also, margin-top and margin-bottom values don't work with <span> element(unless you give it a float).
Apart from these, I see everything is working fine.
I need to make a Headline with background color which is not a block(only the text-bg is colored).
Here is an image of what I have to archieve:
And here is what I've got so far:
http://jsbin.com/tiwuquze/1/edit
You can see the padding is not right and I couldn't figure how to set it.
When you play around with the padding, you will see that it will overlap and the second line is not going in like the first one.
I am happy about every hint!
Solution:
John Smith made a working example: http://jsbin.com/tiwuquze/21/edit
He used box-shadow to emulate the left padding.
UPDATE got the solution, use box shadow :D
h1 {
background-color: #FE8020;
color: #FFFFFF;
display:inline;
white-space:pre-wrap;
line-height : 24px;
font-size: 18px;
font-family:arial, sans-serif;
padding: 5px;
padding-left:0px;
box-shadow: -16px 0 0 #FE8020; /* box shadow is emulating padding liek a charme */
}
for me this looks good
http://jsbin.com/tiwuquze/21/edit
Nowadays (understanding years have passed since this question was posted), if you were willing to use experimental technology and concerned primarily with modern browsers (and could accept how it looked without it on unsupported browsers), you could use box-decoration-break.
The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
h1 {
background-color: #FE8020;
color: #FFFFFF;
display:inline;
white-space:pre-wrap;
line-height : 24px;
font-size: 18px;
font-family:arial, sans-serif;
padding: 5px;padding-left:0px;box-shadow: -16px 0 0 #FE8020;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
https://jsbin.com/hadedulici/1/edit
Also, for what it's worth, box-shadow-based solutions don't seem to work for me in Firefox 55.0.3 (Windows 7) nor Firefox Quantum 62.0.3 (Windows 10) at time of writing.
Try setting a bigger padding and use line-height
example :
line-height:24px;
padding:4px;
You can do as #ReKnawn suggested increase the padding and line-height just ensure that the line height is larger than the font-size + padding x 2 since in this case both the top and bottom are padded. eg if the font-size is 16 and padding is 4px line-height must be greater than 24 to ensure reasonable space and avoid overlapping
here check this solution:
http://jsbin.com/tiwuquze/17/edit
Add a span inside the h1 element.
Although I'm not new to the idea of responsive design I have experienced a very troublesome thing...
I have decided to completely move to rem units, but I still follow 62.5% rule (I have used it with em).
So for starters:
html {
font-size: 62.5%;
}
I assume that 1rem = 10px (I know it's not always true, but hey, it's for me to ease math a little bit, for browser it's still relative right?)
Horror starts in Opera (12.12 both linux and win version, where default font-size is set to 14px and 16px respectively).
header nav ul li a span {
padding: 1.8rem 2.7rem 3rem 0;
font-family: 'sawasdeebold', sans-serif;
font-size: 2rem;
line-height: 3rem;
letter-spacing: -0.3rem;
display: block;
}
As You can see part of my navigation is let's say "pixel perfect" thanks to using rem units. Under linux page is a little bit narrower (that's no problem the font is smaller so 1rem represents less pixels). However everything in nav scales badly if default size is changed to something else than 14px... Under Windows the same is true for 16px... The whole scaling idea just doesn't work. I don't need every pixel to match, but it looks ugly...
The similar problem appears under IE9, but this time is the logotype where:
header h1 a {
margin: 1.8rem 0 0 1.6rem;
width: 46.2rem;
height: 10.1rem;
background: transparent url(../static/img/logotype.jpg) 0 0 no-repeat;
background-size: 46.2rem 20.2rem;
text-indent: -5000px;
display: block;
}
header h1 a:hover {
background-position: 0 -10.1rem;
}
Even though I set logotype's height and the exact size for its background, on hover, the background is positioned 1px too low...
Aside of these problems I have one, general question.
Is it POSSIBLE to create "pixel perfect" layouts with rem units?
I haven't even touched media queries yet and I want to know if it's worth my effort...
BIG THANKS guys!
So... I have switched back to em untits. Except few (minor) glitches in IE9 (which are well known subpixel problems) everything is perfect in ALL browsers. Moreover, as before rem issue, I have no problem with media queries which also use em units. Sadly, it seems that rem units are not yet stable enough to use them across existing web browsers. Case closed...
If you're wishing to continue use 1rem = 10px have you tried –
html {
font-size: 10px;
}
instead of
html {
font-size: 62.5%;
}
does this solve the issue?
I am developing a chrome extension which works on many websites and adds a search text box to the page. Is there a way to mark this input element such that it only uses browser's default CSS styles (and not those that are specific to the website)?
The issue is different sites will have different styles applied for their input boxes. For the extension input box to look consistent across web sites, I'd have to explicitly specify values for all the relevant CSS properties. I am trying to avoid that and am wondering if I can instead mark this element somehow to not use the website styles but only use the browser defaults?
There is no way in CSS to make an element isolated from the effects of style sheets on the page, and there is no way to tell that only browser default style sheet be applied. You can just set properties to desired values, or modify the style sheets being used so that selectors don’t match your element.
You might consider putting the search box in a separate file and embedding it via iframe (or object) inserted into a page and perhaps positioned absolutely. Within the framed document, the style sheets of the framing document have no effect.
Just a follow-up to my question. Here's the CSS that I am using to have the text input element look and behave consistently across different websites. It is working well for all sites that I have tested on, so far. Any feedback/ comments on this would be great.
input.reset-text-input {
/********
dimensions and float property of the input element
*********/
box-sizing: border-box !important; /*using box-sizing for easier calculations. make sure to specify this because it varies across sites, and changes the effective dimensions of the textbox*/
margin: 0 !important;
padding: 2px !important;
width: 150px !important;
height: 20px !important;
float: none !important;
/********
border, outline and drop shadow
********/
border: 1px solid #999 !important;
/*some border radius*/
-webkit-border-radius: 2px !important;
-moz-border-radius: 2px !important;
border-radius: 2px !important;
/*no drop shadow*/
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
outline: none !important;
/**********
text properties
***********/
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 13px !important;
color: black !important;
vertical-align: baseline !important;
word-spacing: 0px !important;
/*not sure if something like this can help. commented for now*/
/*-webkit-appearance: textfield !important;*/
/*appearance: textfield !important;*/
}
input.reset-text-input:focus {
/*show an outline around the element that is same as chrome's default. this needs to be set as it is turned off on some sites. */
outline: 5px auto -webkit-focus-ring-color !important;
}
`
I'm working on a site's CSS and am running across an issue with the body margin section. If you look at this in Firefox and then IE, you can see the line isn't lined up right in Firefox, but it is in IE. (In the black header section).
Here is what I have for the body tag, It's something with the margin and I can't figure it out:
body {
margin: -2px;
padding: 0px;
background: #E7E7E7 url(images/bg01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #888888;
}
Thank you for any responses!
You've placed the image with the text "Nickelson Associates" inside a table cell with a default padding which is 1px in MSIE. You need to force the td element in question to have a padding of 0.
That said, using tables for layout/positioning is considered bad practice.