The inline math sometimes overlaps with the text that follows. I think I've been able to pinpoint the exact source of the issue, which is a line in the stylesheet, but I don't understand what's going on and how I should fix it.
Here is my style.css (this is enough to reproduce the issue):
section.post *, section > p * {
max-width: 100%; }
Here's my HTML page:
<html>
<link href='../stylesheets/style.css' rel='stylesheet' type='text/css' />
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: { equationNumbers: { autoNumber: "AMS" } },
inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true
});
</script>
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<!-- for mathjax support -->
</head>
<body>
<div id='container'>
<div class="content">
<section class='post'>
<p>If \(T=100\) then compute \(1/{\sqrt{T}}\) again.</p>
</body>
</html>
Here's what the output looks like:
Any help will be much appreciated!
The css * applies to ALL elements inside other elements. If you remove the stars, it works as expected and since I assume you want the p to be at most 100% wide, such rule should still accomplish what you want.
As you may know, MathJax takes what is a single element of text from the beginning, and splits it internally into multiple spans based on the designated delimiters it finds. These spans form a rather complicated nested structure (check your browser development tools yourself, there is absolute positioning and MathML and lots of more in there) where some spans have the display property set to inline-block. Now max-width doesn't apply to inline elements but it does to inline-block elements. With your rule, all of these nested spans also get the max-width: 100% rule set.
We can mimick the behaviour like this:
.truncated { white-space: nowrap; max-width: 10px; }
.ib { display: inline-block; }
<p>
<span class="truncated ib">
Text that is truncated due to <tt>inline-block</tt> and <tt>max-width</tt>
</span>
<span>
Ensuing text
</span>
</p>
<p>
<span class="truncated">
Text that is not truncated thanks to <tt>inline</tt> and <tt>max-width</tt>
</span>
<span>
Ensuing text
</span>
</p>
You need a master of MathJax to get a precise reason as to where and why this happens, but my guess is that during some intermediate step, the content of some inline-block span gets a max-width set indirectly by its parent content or directly through parent css at which point the max-width of the child also gets a meaning (max-width in percent has no meaning when the parent doesn't have a width). When the type-setting proceeds, this child box needs to grow which it can't due to this restriction. The need for growing may come from a font being downloaded or something else and may also differ between expressions since some expressions are typeset in a different way than others.
I think the lesson here is that you can style elements that MathJax outputs (typically font-size, color etc...) but I would be careful when it comes to styling them with restrictions on dimensional properties (height, width, min-height, min-width, max-height, max-width) because MathJax needs this freedom to do a good job and if you don't have master level insights into the MathJax typesetting procedure, it is also not likely that this type of styling will have the effect you intend it to have.
Related
thank you for taking the time to review my question! :-) I am attempting to write better, cleaner, more maintainable HTML using custom HTML elements as opposed to the traditional 'div' methods. I have a very simple example that works using a div and a class on it to map my link to the div that I want to show/hide and this does work. I include this as a working example of the kind of functionality I am trying to produce:
<html>
<head>
<style>
<!-- Not sure if display or visibility is the way to go so will look -->
<!-- that later, for now just setting both as that works -->
<!-- For some reason doing this does not seem to work -->
.hidden {
display: none;
visibility: hidden;
}
.unhidden {
display: block;
visibility: visible;
}
<!-- but, doing this does, anyone any idea why? -->
.hidden { display: none; }
.hidden { visibility: hidden; }
.unhidden { display: block; }
.unhidden { visibility: visible; }
</style>
<script type="text/javascript">
function toggle_view_div(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
</head>
<body>
<p>
This test shows or hides a div referenced by its class
</p>
Do the test
<div id="testToggleDivID" class="hidden">
<h3>Testing Toggling HTML</h3>
</div>
</body>
</html>
However, I am trying to provide this kind of functionality with multiple links to multiple sets/subsets of text, I have tried the following but am obviously doing something silly as I can't get it to work:
<html>
<head>
<script type="text/javascript">
function toggle_view_node(nodeID) {
nodeID.getAttribute('visibility')=('hidden')?item.setAttribute('visibility','visible'):item.setAttribute('visibility','hidden');
nodeID.getAttribute('display')=('none')?item.setAttribute('display','block'):item.setAttribute('display','none');
}
</script>
</head>
<body>
<p>
This test shows or hides Topic 1 custom element, (or at least attempts to
</p>
Topic 1
<p>
This test shows or hides Topic 2 custom element, (or at least attempts to
</p>
Topic 2
<p>
<p>
This test shows or hides the Intro custom element, (or at least attempts to
</p>
Introduction
<p>
This test shows or hides the Detail custom element, (or at least attempts to
</p>
Detail
<p>
<Intro>Some introduction text giving a more detailed overview that may want to be hidden by default, but able to be toggled into view with an always visible link such as at the top or on the side of the page</Intro>
<Detail>I may want to add detail with this ability both like this at the root of the document, but potentially inline with other text in custom elements as shown below</Detail>
</p>
<Topic1>
<h1>Topic 1</h1>
<p>
Some topics to be just simple nodes of text.
</p>
</Topic1>
<Topic2>
<h1>Topic 2</h1>
<p>
Other topics to be more detailed topics, <Topic1>potentially including aspects of that can share the toggle feature for the root level topic 1, as per all topic 1 nodes</Topic1> though generally referencing only topic 2 content. <Detail>However it would be nice to be able to toggle not directly relevant, but nice to have detail as well</Detail>
</p>
</Topic2>
<Topic3>
<h1>Topic 3</h1>
<p>
<Intro>Some topics might want an intro<Detail>, that may want further detail contained in them</Detail> that would also provide sufficient intro in itself.</Intro>
So, is this possible? I don't want specific control of sub custom elements, and can do it with div's and assigned classes if I really have to, but surly it is possible with a bit of special JS or CSS to do what I am looking for?</p>
</Topic3>
</body>
</html>
Please, can someone help me figure out what I am doing wrong. I really want to produce the aforementioned functionality with a simple bit of CSS or JS that is as dynamic as possible. Ideally I wont need to specify specific (especially repeated code for each topic or HTML tag that I want the ability to show/hide via a button/link. Obviously, I will probably have to set a few default assignments, maybe turning detail off by default, but if I can avoid required extra repetitive code for each "context" I wish to flip that would be amazing!!!
Any pointers in any direction that can help me achieve what I am attempting without having to use jQuery or a verbose library over and above JS and CSS would really make my day!
Many thanks in advance and apologies if I am doing something really stupid, I haven't done that much work with custom elements and so probably am.
Kind regards,
James
** Latest Attempt **
<html>
<head>
<style>
<!-- Not sure if display or visibility is the way to go so will look -->
<!-- that later, for now just setting both as that works -->
<!-- For some reason doing this does not seem to work -->
.hidden {
display: none;
visibility: hidden;
}
.unhidden {
display: block;
visibility: visible;
}
<!-- but, doing this does, anyone any idea why? -->
.hidden { display: none; }
.hidden { visibility: hidden; }
.unhidden { display: inline; }
.unhidden { visibility: visible; }
<!-- Playing with something like this, ideally I would -->
<!-- configure the show/hide state of my custom HTML tags -->
<!-- universally in a similar way? -->
Topic1.hide { display: none; }
Topic2.hide { display: none; }
Topic3.hide { display: none; }
Intro.hide { display: none; }
Detail.hide { display: none; }
<!-- Another attempt to configure switch state but does not work either -->
Topic1 { className: unhidden; }
Topic2 { className: unhidden; }
Topic3 { className: unhidden; }
Intro { className: unhidden; }
Detail { className: unhidden; }
</style>
<script type="text/javascript">
// This works, but is not clean
function toggle_view_div(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
// I am now attempting to use this on 'Topic1' as per the suggestion
// in the comments of this post, for some reason it does not work, wondering if
// I need to do a .forEach to parse the set of nodeID's of the 'Topic1' in this
// example, but if working whatever HTML tag name that I want to toggle in or
// out of view
function toggle_view_node_id(nodeID) {
var item = document.getElementById(nodeID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
// This does not work but I have left to show what I tried that did not work
function toggle_view_node(nodeID) {
if (nodeID) {
nodeID.getAttribute('visibility')=('hidden')?item.setAttribute('visibility','visible'):item.setAttribute('visibility','hidden');
nodeID.getAttribute('display')=('none')?item.setAttribute('display','block'):item.setAttribute('display','none');
}
}
</script>
</head>
<body>
<p>
This test shows or hides a div referenced by its class
</p>
Do the test that works using extra layer of div with mapped class
<p>
This test shows or hides Topic 1 custom element,
(or at least attempts using the suggestion in this post
comments to try to make work without inline JS and call a
function to do it as with my working example, unfortunatly
however, this still does not seem to work :(
</p>
Topic 1
<p>
This test shows or hides Topic 2 custom element,
(or at least attempts to using existing method that doesn't work
</p>
Topic 2
<p>When I have it working I hope to be able to have: </p>Topic 3
<p>And... </p>Intro
<p>And this... </p>Detail
<div id="testToggleDivID" class="hidden">
<h3>Testing Toggling HTML into view using a div and associated class of hidden, can I not do this on a custom element?</h3>
</div>
<p>
<Intro>Some introduction text giving a more detailed overview that may want to be hidden by default, but able to be toggled into view with an always visible link such as at the top or on the side of the page</Intro>
<Detail>I may want to add detail with this ability both like this at the root of the document, but potentially inline with other text in custom elements as shown below</Detail>
</p>
<Topic1>
<h1>Topic 1</h1>
<p>
Some topics to be just simple nodes of text.
</p>
</Topic1>
<Topic2>
<h1>Topic 2</h1>
<p>
Other topics to be more detailed topics, <Topic1>potentially including aspects of that can share the toggle feature for the root level topic 1, as per all topic 1 nodes</Topic1> generally referencing only topic 2 content. <Detail>However it would be nice to be able to toggle not directly relevant, but nice to have detail as well</Detail>
</p>
</Topic2>
<Topic3>
<h1>Topic 3</h1>
<p>
<Intro>Some topics might want an intro<Detail>, that may want further detail contained in them</Detail> that would also provide sufficient intro without.</Intro>
So, is this possible? I don't want specific control of sub custom elements, and can do it with div's and assigned classes if I really have to, but surly it is possible with a bit of special JS or CSS to do what I am looking for?</p>
</Topic3>
</body>
</html>
you don't need a .unhidden class, only a .hidden class. It looks like:
.hidden{
display:none;
}
simply use classList like classList.toggle("hidden") or .add or .remove.
I'm trying to figure out out to create a event to appear in front of my home without it opening a new page. It would, for lack of a better word, expand to fill the browser. I know I'll have to do some work with z-index and javascript. The month would hover and then the user would click to see the event.
Home and event
My HTML
<div class= "month sep_box">
<h1 class= "sep">SEP</h1>
<div class= "year">2016</div>
</div>
CSS
.sep_box{
background-image: url("images/design_disrupt.svg");
background-repeat: no-repeat;
background-size: cover;
background-clip: content-box;
background-position: center;
float: left;
width: 25%;
height: 25vh;
transition:.25s ease;
}
EDIT: Screen-shoted HTML now copied
<article>
<div><h1 id="design_disruptors">
DESIGN <br />DISRUPTORS</h1></div>
<div><p class="child_day">THURSDAY</p></div>
<div><p class="child_day_number">15</p></div>
<div><p class="child_event_about">JCM 2121<br />7:00pm</p></div>
<div><p class="child_rsvp">RSVP</p></div>
<div><p class="child_desc">Design Disruptors reveals<br />
a never-before-seen<br />
perspective on the design approaches of these<br />
companies and how they<br />
are overtaking billion dollar industries though design.</p>
</div>
</article>
https://jsfiddle.net/es60r7cv/
The comments aren't going to work at this point because of the character limit, so I'm going to try my best to give you some hints here. I am a little unsure as to how far along you are in your development to this point, and the intent of the design, but let's give it a shot.
Firstly, if I understand your design image correctly, you want almost the entire screen to look different except for the square that was clicked. This is going to be difficult, as you'll need to position a lot of elements in just such a way that you can have a transparency in exactly the right spot. Given your design, and how important pixel-perfection is going to be to making it work, and where you are in your development, I'm wondering if it would be ideal to simply fix the width of the whole design (no growing or shrinking with the screen).
I would also recommend you use jQuery for this project, as it will be easier for you.
To add an event listener to all your month boxes using jQuery, you would write it:
$(document).on('click', '.month', function (evt) {
// your event handling code here
}
I would give each month element an id for the month it represented, then create your overlays with a similar id. So, for example, the December month box would be <div class="month" id="december"><!--your_content--></div> and the overlay for the month could be <div class="overlay" id="decemberOverlay"><!--your_overlay_content--></div>. That way you could target it by getting the clicked month boxes id, and getting the overlay by doing that id + "Overlay".
You could fetch your overlay content on the fly using AJAX, but to reduce complexity for yourself you may just always load all overlays to the page and hide them with CSS, but also include the positioning code:
.overlay {
display: none;
z-index: 10;
position: absolute; /* this will position it to the document, or the first parent that is relatively or absolutely positioned */
top: 0;
left: 0
}
We are using absolute positioning because:
we want to be able to position the overlay directly over the original image, and not influence the flow of the rest of the document, and
z-index requires some non-static position value to be applied
Then, in your script, you would update it do be this:
$(document).on('click', '.month', function (evt) {
var clickedMonth = this.id;
var correspondingOverlay = $(clickedMonth+"Overlay");
correspondingOverlay.show();
}
Based on your fiddle and code, I think perhaps you are not very far along yet. Hopefully this gives you a bit of a head start on how to achieve your desired result.
Edit:
One last thing-- this is a cleaner way to style your markup:
<article>
<div>
<h1 id="design_disruptors">DESIGN <br />DISRUPTORS</h1>
</div>
<div>
<p class="child_day">THURSDAY</p>
</div>
<div>
<p class="child_day_number">15</p>
</div>
<div>
<p class="child_event_about">JCM 2121<br />7:00pm</p>
</div>
<div>
<p class="child_rsvp">RSVP</p>
</div>
<div>
<p class="child_desc">
Design Disruptors reveals<br />
a never-before-seen<br />
perspective on the design approaches of these<br />
companies and how they<br />
are overtaking billion dollar industries though design.
</p>
</div>
</article>
Clean HTML will be easier to read and easier to spot errors.
Screenreaders will read whatever string is set to the "alt" attribute. The use of this attribute is specifically for image tags.
If I have a div like so:
<div id=myCoolDiv tabindex="0"> 2 <div>
Is there a way to have a screen reader pickup an attribute to read a string the same way an alt tag is used?
So for the div listed below, the screen reader will say ie: "shopping cart items 2"?
I tried using aria-label but the screenreader won't pick it up:
<div id=myCoolDiv tabindex="0" aria-label="shopping cart items"> 2 <div>
You can just put a title tag in the div which will do the same as an alt tag like so:
<div title="I AM HELLO WORLD">HELLO WORLD</div>
"I AM HELLO WORLD" will be printed once you move your cursor around it on a browser
There are two ways (which can be combined) to have screen reader to read alternative text:
Anything with ARIA role img can (MUST) have alt attribute. See WAI-ARIA img role.
<div role="img" alt="heart">
♥︎
</div>
UPDATE: In 2017 the WAI-ARIA document was changed and the following text does not apply anymore. See comments below.
However this should be used only in case the element really represent an image (e.g. the heart unicode character).
If an element contain actual text, that just need different reading, you should set ARIA role to text and add aria-label with whatever you want to be read by the screen reader. See WAI-ARIA text role.
<div role="text" aria-label="Rating: 60%">
Rating: ★★★☆☆︎
</div>
Do not mismatch it with aria-labeledby which should contain ID of an related element.
You can combine the previous two cases into one using two ARIA roles and adding both alt and aria-label:
<div role="img text" alt="heart" aria-label="heart">
♥︎
</div>
When more ARIA roles are defined, browser should use the first one that is supported and process the element with that role.
One last important thing is that you must set page type to HTML5 (which support ARIA by design).
<!DOCTYPE html>
Using HTML4 or XHTML requires special DTD to enable ARIA support.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"
"http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
Try role="listitem" or role="group" and aria-labelledby="shopping cart items". See Example 1. The 2 is text content which should be read by screen reader already with the attribute read as context to the content. Refer to this section.
UPDATE 2
Add aria-readonly=true role=textbox if you use an input. If there are doubts whether to use aria-label or aria-labelledby, read this article. In the documentation for JAWS and testing it myself supports the fact that aria-label is ignored. Furthermore, semantics are very important when accessibility is your concern. Using a div when you could use an input is not semantically sound and like I said before, JAWS would accept a form element more readily than a div. I assume that this "shopping cart" is a form or part of a form, and if you don't like it's borders, input {border: 0 none transparent} or use <output>* which would be A+ as far as semantics are concerned.
Sorry, #RadekPech reminded me; I forgot to add that using aria-labelledby needs visible text and that the text needs an id which is also listed as the value(s) of aria-labelledby. If you don't want text because of aesthetics, use color: transparent, line-height: 0, or color:<same as background>. That should satisfy visibility as far as the DOM is concerned* and still be invisible to the naked eye. Keep in mind these measures are because JAWS ignores aria-label.
*untested
EXAMPLE 3
<span id="shopping">Shopping</span>
<span id="cart">Cart</span>
<span id="items">Items</span>
<input id='cart' tabindex="0" aria-readonly=true readonly role="textbox" aria-labelledby="shopping cart items" value='2'>
UPDATE 1
For JAWS, you probably have to configure it a little:
Click the Utilities menu item.
Then Settings Center.
Speech and Sounds Schemes
Modiy Scheme...
HTML Tab
In this particular dialog box, you can add specific attributes and what is said when an element is tabbed to. JAWS will respond to form elements easier because they can trigger the focus event. You'll have an easier time doing Example 2 instead:
EXAMPLE 1
<div id=myCoolDiv tabindex="0" role="listitem" aria-labelledby="shopping cart items"> 2 <div>
EXAMPLE 2
<input id='semantic' tabindex="0" role="listitem" aria-labelledby="shopping cart items" value='2' readonly>
In case you use Bootstrap Framework there is a quick and easy solution. You should use sr-only or sr-only sr-only-focusable Bootstrap's CSS classes in a span element where your screen-reader-only text will be written.
Check the following example, a span element with class glyphicon glyphicon-shopping-cart is also used as cart icon.
<div id="myCoolDiv">
<h5>
<span class="glyphicon glyphicon-shopping-cart"></span> 2
<span class="sr-only sr-only-focusable" tabindex="0">shopping cart items</span>
</h5>
<div>
Screen Reader Output: "two shopping cart items"
provided by Fangs Screen Reader Emulator Addon for Firefox
You can find the above working example in this: Fiddle
As suggested by Oriol, in case you don't use Bootstrap Framework then simply add the following in your CSS file.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
According to the text alternative computation algorithm of the W3C and the
Accessible Name and Description: Computation and API Mappings 1.1 you definitely should use aria-label.
That being said, it does not work with Jaws. Text alternative is only computed for elements having an ARIA role.
The remaining option is to use a link that will go to your cart page, using both title and aria-label to satisfy anyone:
2
You can also use a transparent 1 pixel option:
2 <img src="pixel.png" height="1" width="1" alt="shopping cart items" />
No, there is no equivalent to an alt attribute for <div> elements.
For what you are trying to do, an ARIA-based solution is overkill. Not only are you bumping into screen reader compatibility problems, you are applying ARIA attributes where they are not needed (and arguably do not belong if on something like a <div>).
Instead, consider using an off-screen technique (such as this one from The Paciello Group or this one from WebAIM). Content hidden using this technique will still be read by screen readers but will be visually hidden.
From reading your question, I think this is what you are after.
I made a pen demonstrating this technique. It may be easier to test in the full-page version.
Edit: Added HTML and CSS from the example, but please note that both the specs and browser / assistive technology support change over time, so if you are reading this in a year you should continue to use the links above to verify this CSS is still the current best practice.
HTML
<div tabindex="0">
<span class="offscreen">Items in shopping cart: </span>2
</div>
CSS
.offscreen {
position: absolute;
clip: rect(1px 1px 1px 1px);
/* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
Accessibility (Screen readers) can be achieved through role and aria-label tags on div. This can be very useful while using svg.
<div role="img" aria-label="I can speak the text">
<svg>...</svg>
</div>
Try:
HTML
<div id=myCoolDiv tabindex="0"><span class="aria-hidden">shopping cart items</span>2<div>
CSS
.aria-hidden {
position: absolute;
left: -100000px;
}
This will announce the text inside the span. And the Parent div will not lose visual focus. Aria-hidden class will hide the span from the visible screen area but will read it as its inside the div that has focus.
You can create a class such as screen-reader-text with the following css:
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
overflow: hidden;
position: absolute !important;
}
Then, in your code, you can just add a <span> with the screenreader text as so:
<div>
I am a div!
<span class="screen-reader-text">This is my screen reader text</span>
</div>
See an example over here: https://jsfiddle.net/zj1zuk9y/
(Source: http://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/)
Use an image inside the div that has the label as its alt attribute. That way, those without screen readers just see the number and an image, whereas those with readers will hear the whole sentence:
<div>
<img src="http://tny.im/57j" alt="Shopping cart items" />
2
</div>
Seen as:
2
Read as: "Shopping cart items: 2"
The alt attribute exists for images because there is no way to "read aloud" the content of the image, so the provided text is used instead. But for the div, it already contains text and images. Therefore, if you want it to be read by a screen-reader, you need to include the text and alt text in the content of the div.
My website has currently 3 CSS files that are automatically included as a part of the website and I do not have access to the source i.e. index.html of the website but I do have access to the CSS files of my website.
I am trying to use my own style to override my websites CSS files and create a new CSS file that would contain all the styling that I would like to overwrite on my website.
I have tried using #import url(css4.css) and I have placed that at the top of my last CSS file but that wouldn't overwrite the last CSS file's styling.
How can I achieve this?
<link rel="stylesheet" type="text/css" href="currentCSS1.css">
<link rel="stylesheet" type="text/css" href="currentCSS2.css">
<link rel="stylesheet" type="text/css" href="currentCSS3.css">
<!-- How to add this below just by using CSS? -->
<link rel="stylesheet" type="text/css" href="newCSS4.css">
Besides using !important that most answers are advising you to use, this is a matter of CSS specificity
The concept
Specificity is the means by which a browser decides which property
values are the most relevant to an element and gets to be applied.
Specificity is only based on the matching rules which are composed of
selectors of different sorts.
How is it calculated?
The specificity is calculated on the concatenation of the count of
each selectors type. It is a weight that is applied to the
corresponding matching expression.
In case of specificity equality, the latest declaration found in the CSS is applied to the element.
Some rules of thumb
Never use !important on site-wide css.
Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).
Never use !important when you're writing a plugin/mashup.
Always look for a way to use specificity before even considering !important
can be represented by 4 columns of priority:
inline = 1|0|0|0
id = 0|1|0|0
class = 0|0|1|0
element = 0|0|0|1
Left to right, the highest number takes priority.
Here is a snippet with a Full example of a CSS specificity
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY: 0/1/0/0 */
#id {
background-color: green
}
/* SPECIFICITY: 0/0/1/0 */
.class {
background-color: yellow
}
/* SPECIFICITY: 0/0/0/1 */
section {
background-color: blue
}
/* ------------ override inline styles ----------- */
/*to override inline styles we now use !important */
/* SPECIFICITY 0/0/1/0 */
.inline {
background-color: purple !IMPORTANT /*going to be purple - final result */
}
<article>
<div id="id">
<div class="class">
<section>
<div class="inline" style="background-color:red">
<!--SPECIFICITY 1/0/0/0 - overridden by "!important -->
</div>
</section>
</div>
</div>
</article>
Now here is the Full snippet step by step
ID: GREEN
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 0/1/0/0 */
#id {
background-color: green
}
<article>
<div id="id">
<div class="class">
<section>
<div>
</div>
</section>
</div>
</div>
</article>
CLASS: YELLOW
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 0/0/1/0 */
.class {
background-color: yellow
}
<article>
<div id="id">
<div class="class">
<section>
<div>
</div>
</section>
</div>
</div>
</article>
ELEMENT: BLUE
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 0/0/0/1 */
section {
background-color: blue
}
<article>
<div id="id">
<div class="class">
<section>
<div>
</div>
</section>
</div>
</div>
</article>
INLINE STYLE: RED
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
<article>
<div id="id">
<div class="class">
<section>
<div style="background-color:red">
<!--SPECIFICITY 1/0/0/0 -->
</div>
</section>
</div>
</div>
</article>
OVERRIDDEN INLINE STYLE: PURPLE
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 1/0/0/1 */
section > div {
background-color: purple !IMPORTANT
}
<article>
<div id="id">
<div class="class">
<section>
<div style="background-color:red">
<!--SPECIFICITY 1/0/0/0 -->
</div>
</section>
</div>
</div>
</article>
You can calculate the specificity of your element(s) here
Note:
A must read on this subject
Inheritance and cascade
CSS Specificity
Specifics on CSS Specificity
Here's a fun solution no one has mentioned.
Facts:
You cannot modify the HTML of the page at all - no problem!
You can modify the CSS files, but the developers may modify them
again later and remove any changes you made - not a worry.
You cannot/do not want to use Javascript and JQuery - fine by me.
You can add more files on to the server - Excellent!
Let's do some .htacess hacking for fun and profit!
Document root .htaccess file:
Options +FollowSymlinks
RewriteEngine on
RewriteBase /
RewriteRule ^(.*?)css3.css(.*?) $1hackedCSS3.php$2 [L]
Result: hackedCSS3.php is silently served instead of css3.css on every request.
REF: http://httpd.apache.org/docs/2.2/howto/htaccess.html
hackedCSS3.php file:
<?php
// Send the right header information!
header("Content-type: text/css; charset: UTF-8");
// Output the css3.css file
echo file_get_contents("css3.css");
?>
// Add your CSS here with any neat !important or override tricks (read: specificity)
div { ... }
Bonus:
You could expand this solution to include all three .css files in this one .php file (but only serve, say, css3.css and send the css1.css and css2.css to a black hole with .htaccess), and use clever regular expressions to remove/modify those developer's CSS without touching any of their files. The possibilities are tantalizing.
Addendum:
Can you be a bit more specific on where to include these files?
The .htaccess file should be in the document root directory of the website. This is where www.example.com/index.html would load index.html
Should the hackedCSS3.php file be in the same directory as the other
css files?
It can be in any directory you specify in the .htaccess file. The document root is fine. Change
RewriteRule ^(.*?)css3.css(.*?) $1hackedCSS3.php$2 [L]
to
RewriteRule ^(.*?)css3.css(.*?) /folders/you/want/hackedCSS3.php$2 [L]
Should our css content (where you specified // Add your CSS here...)
should be within html style tags?
No. Treat your CSS code in that section as if it were a .css file. You do not need <style> tags.
To use CSS only, the best way would to use Chrome or FireFox's developer tools and find the various style you want to overwrite.
The for each of the style you find that need adjusting then use the !important modifier.
.newClass {
color:red !important;
}
Another way would be to write unique css class names and again use !important if you need. The real trick here is in specificity. If an identifier is more specific the rule will be applied.
6.4.1 Cascading order
6.4.1.4
Finally, sort by order specified: if two declarations have the same
weight, origin and specificity, the latter specified wins.
Declarations in imported style sheets are considered to be before any
declarations in the style sheet itself.
<a class="my-most-awesome-link its-really-cool">Most awesome link</a>
.my-most-awesome-link.its-really-cool {
text-decoration:none !important;
color:red !important;
}
If you are desperate you could use javascript to remove the unwanted css.
See this JSBin for a working example.
I found this interesting technique
<script>
function removejscssfile(filename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none"; //determine element type to create nodelist from
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none"; //determine corresponding attribute to test for
var allsuspects=document.getElementsByTagName(targetelement);
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1){
allsuspects[i].parentNode.removeChild(allsuspects[i]); //remove element by calling parentNode.removeChild()
}
}
}
removejscssfile("css1.css", "css") ;
removejscssfile("css2.css", "css") ;
removejscssfile("css3.css", "css") ;
</script>
In your new CSS file, add !important to the block of code, for instance:
if you have this on css1.css:
h2{
color:#000;
}
In css4.css put the same element, but with !important, as follows;
h2{
color:#ccc !important;
}
Therefor, !important will force that this style will be by all means the style set for the element to which it's applied.
Use #import url('css4.css') in one of your existing css page. Then use specificity to be highlighted your new code as bellow:
Html :
<ul class='ulclass'>
<li class='liclass'>
<a class='aclass>The text</a>
</li>
</ul>
css1.css :
.aclass{
color : red;
}
css4.css :
ul.ulclass li.liclass a.aclass{
color: green;
}
Then you will have green color in your a element
write a new css, and use id of elements rather than class. Also use !important in css.
An alternative: Rely on the cascade, instead of specificity
A number of solutions here recommend using #import to include your css4.css file and then modifying the selectors therein to have a greater specificity or to use the !important declaration, but there is yet another way.
Paste the entire contents of css4.css at the end of css3.css. In this way, you need not rely on !important or specificity, because the cascading inheritance will adopt your rules at the end of the file if they are of equal specificity.
With this method, you are sacrificing modularity for easier implementation.
Example of pasting, relying on cascade:
/* Contents of css3.css */
.mycooldiv {
font: bold 1.2em sans-serif;
color: tomato;
}
/* Pasted contents of css4.css */
.mycooldiv {
color: lime;
}
<div class="mycooldiv">Hello World</div>
However, it would be easy enough to create greater specificity by simply prepending html to the beginning of every rule in css4.css, if you don't want to paste it at the end of css3.css. This is preferred to adding !important where it works.
Example of importing, relying on greater specificity:
/* #import of css4.css with greater specificity */
html .mycooldiv {
color: lime;
}
/* Contents of css3.css */
.mycooldiv {
font: bold 1.2em sans-serif;
color: tomato;
}
<div class="mycooldiv">Hello World</div>
I think I have an answer. The way that I have tried to achieve this is:
1) Say my css3 is the last CSS in the list and I have all my changes in css4. I have made a copy of css3 and called it "css3-Original.css" and added my css4 in the same folder. I then created another css file called "css3.css" (because that is the last one it takes from the list) and added imports of my Original css3 first and then my overriding css4.css file as given below:
css3.css (The new one)
#import url("css3-Original.css")
#import url("css4.css")
This is the best way I found it to work. This way although I know that my css3.css file will change on updates but I know how I can replace it very easily and quickly. I have used !important in my css4.css wherever necessary (if required) but basically because its the last css file, it uses that styling as compared to any previous ones (unless they are !important).
Thanks for the suggestions guys. I finally managed to come to a solution.
If I understand you're question correctly, adding #import url(css4.css) to the top of css3.css does import your stylesheet into css3.css. But your styles are being overridden by the styles in css3.css. This is because of Cascading Order and Specificity. In order for your css4.css styles to be used, your selectors must have a higher specificity than the selector in css.3.css you are trying to override.
Example: <h1> tags will be colored red.
body h1 { //this is more specific
color: blue;
}
h1 { //this is less specific
color: red;
}
But since you're #import url(css4.css) line of code will get removed every time the developers update the css3.css file this is not a "bullet-proof solution"
Do you have the ability to add any javascript to the site? If so you could use the following solution
jQuery
$('head').append('<link rel="stylesheet" type="text/css" href="css4.css">');
Javascript
var head = document.head
, link = document.createElement('link')
link.type = 'text/css'
link.rel = 'stylesheet'
link.href = 'css4.css'
head.appendChild(link)
Source: https://stackoverflow.com/a/11833777/2687861
Unfortunately, I have to agree with phari.
Quote:
1) You cannot modify the HTML of the page at all, and therefore cannot include another CSS file. 2) You can modify the CSS files, but the developers may modify them again later and remove any changes you made. Hence you cannot permanently modify the CSS files. 3) You cannot/do not want to use Javascript and JQuery). If all of these things are true, there is no solution to your problem.
Commented by phari on Mar 26 at 14:29
Let me break it down. I will try my best to explain why there's no solution (correct me if I am wrong at any of these options);
Option1: Using jQuery or Javascript.
You cannot modify the HTML of the page at all!! You do not want to use jquery nor javascript.
This means that all answers to your question mentioned on this page which involves jquery or javascript are disregarded. This does not mean the answers given on this page are wrong. In your case it's not possible.
Option2: #import url(css4.css);
Your website has 3 css files that are automatically included as a part of the website, but unfortunately, you DO NOT have access to ANY of these css files. You can not place this piece of code in css3.css, or any of these files.
You can modify the CSS files, but the developers may modify them again later and remove any changes you made, which means #import url(css4.css); can also be removed.
Also using #import url(css4.css); would be completely useless. You'll have to place #import url(css4.css); at the end of css3.css, but this won't work because #import rules must always be first in a document. If I am not mistaking ilia (who commented on Mar 23 at 9:42) meant the code can be place anywhere in the file. #import url(css4.css); must be at the top. The link ilia provided as "prove" also specify that it's a requirement to place it at the beginning.. Check the two links below.
More Info visit http://webdesign.about.com/cs/css/qt/tipcssatimport.htm or https://developer.mozilla.org/en/docs/Web/CSS/#import#Specifications.
Option 2 is disregarded too.
I don't think there could be another way to do what you want to do.
Hence, there is no solution to your problem.
For duplicate CSS definitions, the last definition will have precedence.
If the added css4.css file is actually referenced after the "3 css files that are automatically included", then the css4.css file's definitions should override the prior duplicate definitions from these other files.
If you are not seeing the results that you expect, use the "view source" option of your browser to confirm the sequence in which the CSS files are referenced. Also use the "Developer tools" of the Chrome browser or the "Firebug" add-on for the Firefox browser to find out how the browser is interpreting the CSS definitions to yield a result that you did not expect. These tools should provide insight to your problem.
You can just overwrite the text in the css file available to you, the style which you want from previous css file you can copy that code in the you can add with that new code refresh your website the result you need appears
I have developed an application in mootools. But its going little slow coz of number of tags it contains are almost 10,000. and every tag's structure is like:
<div style="float:left;padding:5px;margin: 6px;"> <!-- tag-1 -->
<img src=""> <p>name</p> <p>Gender</p> <p>Mood</p>
</div>
in following container
<div id="tags_container" style="overflow: scroll;height: 700px;">
<div style="float:left;padding:5px;margin: 6px;"> <!-- tag-1 -->
<img src=""> <p>name</p> <p>Gender</p> <p>Mood</p>
</div>
<!-- tag-2 -->
.
.
.
<!-- all tags one after another -->
</div>
i m showing these tags in rows and columns format ( 5 columns and 2000 rows).
The id="tags_container" < div > has vertical scrollbar. but when i try to scroll down in that division to see further tags it scrolls little slow.
what should i do about it?
should i change the implementation method from < div > tags to < table > tag?
what are the options to make it any faster?
In few previous questions, i was advised not to use those many tags in one single document but there is gonna be those many tags so what should i do about it.?
I've done something like this before. Use more CSS classes and fewer elements, and remove everything unnecessary (like comments). Though the data was tabular in nature, I found it much easier to create a pixel-perfect layout using <div>s.
Markup
<div class="cell">
<img src=""> <p>name</p> <p>Gender</p> <p>Mood</p>
</div>
CSS
div.cell {
float: left;
padding: 5px;
margin: 6px;
}
If possible, it may also be quicker to use CSS spriting for the images, rather than 10k more elements for the images. Something like:
Markup
<div class="cell" style="background-position: 0px 0px;">
<p>name</p> <p>Gender</p> <p>Mood</p>
</div>
CSS
div.cell {
float: left;
padding: 5px;
margin: 6px;
background-image: url(path/to/sprite);
background-repeat: no-repeat;
}
Edit If you need to do any sort of DOM manipulation of these elements, I recommend loading all of them up into a JS array — once — and then accessing them by index from the array. Repeatedly querying the DOM for the same elements will wreck performance.
If possible, also remove the <p> elements within each <div>. If you've got 10k <div> elements, each containing 3 <p>s, then you're really working with a minimum of 40k elements.
That's a lot of DOM, baby.
If you can figure out how to get the same layout removing even just 1 or 2 <p>s from each <div>, you're instantly down to 20k or 30k elements.
Why not use a table? It looks like you're trying to build a table with divs.
Sounds like a tabular document to me. Why not use a table?
Note that even with a table you may have some trouble, but I suspect it will be faster.
You should also consider using a class for your styling, rather than doing it manually for each row.
That seems to be the exact reason tables were created in the first place - tabular style data. Any reason you aren't using tables already?
A large amount of tabular data renders fastest if you break it up into separate tbodies, and set table-layout to fixed. Keep all the style info out of the html and in a style element or linked stylesheet.
Is it necessary to show all 10,000 rows on the page at once? Perhaps you could look at implementing the ScrollSpy plugin developed by David Walsh. This will allow you to load a smaller initial record set then access more records when required.