In a website, I have a header and footer that comes from another website.
Those header and footers came with javascript and add lots of CSS files (CSS files used from another website) ... and the main website too!
Those CSS are like battle themselves and the rendreing of the header and footer are like mixed styles because of mixing CSS rules from all css files...
How Can I remove all the CSS rules (main.css) on the two part of the main website and just apply the "headerAndFooter.css" on those two parts?
The every part havs his proper div.
Thanks in advance
You should create a new class for your headers and footers in a separate CSS file - and enter the needed styles there. That way, they won't conflict with the rest of your site - and you won't compromise the rest of your site's layout by modifying global CSS.
Of course, without seeing any of your code, it's hard to provide a detailed answer, but in cases like this, more accurate class names are a good starting point.
You can use !important at the end of the value of the property you are trying to change, if you have several rules overwriting each other.
For example: the blue color would show, not the red, because you labeled the blue as important.
body {
color:red;
}
body {
color:blue !important;
}
A better solution would be to just erase the rules that you don't need from the different css files.
I finally download the incoming CSS and prefix them by #header and #footer. Than I ahave full control of all CSS because I use it locally.
Related
I have to create a website and on every page I have a top nav bar. Acctualy I have 10 sites and when I have to change the content of the NavBar, I have to change it in every single site.
What is here best practice?
I have tryed to create a js file with the NavBar inside (document.write"".....), but with this solution I have to convert the html code into JS code and this is not my favorite solution?
Is there an better way?
Thanks for answer.
I think you should create a navbar.html file, contain the code of your nav bar, then
<?php
include 'navbar.html';
?>
First you can use media in css ,
The #media rule is used in media queries to apply different styles for different media types/devices.
In my words, you can give different style based on screen's width.
The Second method is The Browser Object Model.
BOM, screen.width can return you the width of the current browswer's width.
Just wondering which of these methods of styling has the priority while styling html:
Using CSS:
div{background-color:yellow}
Using style attribute:
<div style="background-color:red"></div>
Using script:
document.getElementsByTagName("div")[0].style.backgroundColor="green";
The last example will win, because it's the same thing as your second example (both are inline style properties), but happens later, overwriting red with green.
In general, it's (in descending order of priority):
Inline style properties with the !important flag
CSS properties with the !important flag
Inline style properties without the !important flag
CSS properties without the !important flag
...where within the "CSS properties" area there's the entire realm of specificity.
The priority is exactly opposite your list.
Linked CSS-stylesheets are overridden by inline-styles, and JS-added rules will override both linked and inline styles. They are actually overwritten in the moment - not stored, but on load / when the JS is run, it will overwrite current styles for the remainder of the session (or longer, depending on how the JS is set up).
The css belongs to the css files, so using CSS is the normally the best option.It's better because is more readable, and its better organized than putting it directly in the html or via javascript.
One important thing to be aware of, is the CSS Specifity. That means, different methods of writing CSS have different priority when the browser have to apply the styles. Check this link for the documentation about CSS Specifity:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Hope it helps
I am aware of the fact that layout and function of a site should be strictly separated. Layout should be done with CSS and functions of the site, like expand mobile menu on click, should be done with JS.
Reference:1. & 2.
What I often see happening for responsive layouts is having column classes for the various media queries, where just the class name is different, however the width values are identical.
This then leads to HTML in the form of
<div class="container small-query-columns-4 medium-query-columns-6 large-query-columns-12><p>Responsive paragraph..</p></div>.
Would it be acceptable to instead of always defining the same width for columns for various media queries to just make a minimal CSS grid, where the column classes widths are defined once and then dynamically pass those per media query with Enquire?
I know this ruins the above given separation from layout (CSS) and function (JS), though it would mean much cleaner HTML, and this per each media query plus much less CSS as well. Enquire also only calls once per media query so the hit on the amount to download would also be much less with a minimal CSS file. Yes, of course, this means the site is JS depended.
That's not bad idea but I think that it is not good idea too. I had thought about something similar few weeks ago. I wanted to make CSS which will be compiled in browser via JS in few loops and then appended to head section. But after deep thinking I decided to not doing that.
I know that you can make fallbacks and some fancy stuff so it works in every browser with or without js, but I have looked at my grid. It takes less than 10KB. It's interesting idea, but it isn't worh so much work as it will take. Keep your HTML organised and you won't run into issue with too many css classes. You have to let someone who use your "framework" do define widths at certain breakpoints. Easiest thing to do is just write a class name.
Consider that when you use for example bootstrap and want to have 12 columns on mobile, you just don't define it and it automatically falls into that width. Many times it just enough to define max 2 breakpoints with css classes.
When I think about enquirejs I think that it can be used for hiding sliders on mobile for example. When you just display: none it still running and changing classes. If you have something similiar what should be removed because mobile is not good environment for running something, you can disable it by using enquire. Another example is mansory grid, which you can start and disable via enquirejs.
Basically you can use it if you have something already js-depended and want to customize it on diffrent screens, or give diffrent behavior, because if you just set something on window load or document load, you have an issue with someone who resizes window. Here you can use it.
I'm working on a browser script that scans a page for keywords, highlights them, and when the user hovers over them - creates a tooltip that gets filled using AJAX and PHP. The only problem I've run into is that the CSS of the website the tooltips are displayed on is interfering with the CSS of the tooltip content.
The tooltip uses an <img>, <p> and <table> with <tr> and <td>. My PHP file echoes these elements back with ID's which I have styled in my CSS file. My CSS displays properly on some sites like Wikipedia, but others mess up the padding/margins/alignment. For example, certain websites may align <td> center, while I would like it aligned left. I have already added "!important" to many of the ID's used.
Question: How do I keep a website's CSS from interfering with the styles of my tooltip?
One thing you could do is to use a id for your tooltip container.
You just need to keep in mind that id have to be unique. So you must not have two tooltips on your page.
<div id="my-tooltip-2986234">
the content of the tooltip
</div>
Then for your css file your create something like this:
#my-tooltip-2986234 * {
/*reset all style properties here (you can take this of a css reset script)*/
}
Because id a have a higher weight then rules without an id this should overwrite all stylings of the foreign page inside of your tooltip container.
You will also need to prefix all your rules for the tooltip with that id.
#my-tooltip-2986234 a {
/*style for your a*/
}
You indeed could still have problems with !important rules of the foreign site. But creating your styling code that way would minimize the conflicts. Your can still think of adding !important rules to your rules. But at least for the things I created prefixing the rules with an id was sufficient.
Another solution - but not as elegant as the one above - is to create an iframe container where you write your content to. That way you would have complete sandboxing of your css rules. But because I didn't use iframe for a long time I don't know right now where the pitfalls in the various browsers are (You need to create an iframe without a src, because of cross domain policies, which used to cause problems in some browsers).
Is there any way to stop an <img> tag loading its image by just using CSS? I would like to avoid using JavaScript.
This doesn't seem to work (Firebug still shows the images loading):
display: none;
visibility: hidden;
No — CSS only tells browsers what content should look like, it doesn’t specify loading behaviour.
The best you could do that involves CSS is to remove the <img> tag from your HTML, and replace it with an element that shows an image via CSS’s background-image property. Then the image is controlled more in the CSS than the HTML.
I still don’t think you can guarantee when the image will be downloaded though — I seem to remember early versions of Safari would download images referenced in a stylesheet even if they weren’t used on the current page? Using JavaScript (to create the <img> tag when you want the image loaded) is probably the most reliable way of controlling the timing of images getting loaded.
However, have a look at the page linked to from #Stackle’s answer to see the loading behaviour of browsers in April 2012 with different bits of CSS that hide elements with background images.
This is an old question but today we can do it by using css only.
The answer is Yes, but not support on some browser.
See this http://timkadlec.com/2012/04/media-query-asset-downloading-results/
You can PRELOAD images using CSS only, but not actually delay the loading of images using CSS only.
This can, however, be done easily using something like jQuery Lazy Loader, which is MUCH easier than trying to do it by hand.
Place this at the end of your style sheet:
* img { display: none !important; }
You then set them all to be
.img{visibility:hidden;}
this will prevent them from making an http request but still preserves their size and spacing in the document preventing any redraws.
then when you want to show your hidden images (for instance the ones in view) you add a class to the surrounding html element and in your css tell this to be
.show .img {visibility:visible;}
That should do it, Holmes.