I have been advised that said CSS page-break-inside:avoid; would prevent elements being printed between 2 pages.
On this directions print out this simply does not work on all tested browsers so far. The CSS .instruction has this applied yet prints across pages.
Example: http://www.golfbrowser.com/A4/directions.php?start=PARIS&end=SL42ES
Any ideas?
The page-break-inside property is only supported by Opera.
http://www.w3schools.com/cssref/pr_print_pagebi.asp
Just add a print stylesheet or use a media query and a breaking div or just add the style to the elements in your html that need braking when printing.
Try adding this after every long block of content that you think needs breaking:
<div class="break"> </div>
And as for your css just add this:
.break {
display:none;
} //place inside your regular stylesheet file
#media print {
.break {
display:block;
page-break-after:always
}
}
This method works in most modern browsers, including IE8+.
Related
I have a few divs with text that have display:none set. While on the screen I have a functionality that changes it to display:block when I click other elements.
<div class="hiddenText" style="display:none">My hidden text</div>
I need to print the page and show all text. I added css file for print and specified display for hidden text
#media print {
.hiddenText {
display: block
}
}
All styles for printed version of the document work great, except this. What is the best way to make it printable?
Your inline styles have precedence over the rules specified elsewhere. To override inline styles you can use the !important keyword to force the rule.
Something like this will probably do the trick:
#media print {
.hiddenText {
display: block !important;
}
}
Even though !important has nothing to do with CSS specificity, MDN has a section in its article on the topic that discuss !important.
When an !important rule is used on a style declaration, this
declaration overrides any other declaration made in the CSS, wherever
it is in the declaration list. Although, !important has nothing to do
with specificity.
Instead of #media print try putting your print styles in something like this, <LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="foo.css">
I'm working on a site which has line breaks inserted as <br> in some of the headings. Assuming I can't edit the source HTML, is there a way with CSS I can ignore these breaks?
I'm mobile optimising the site so I don't really want to use JavaScript.
With css, you can "hide" the br tags and they won't have an effect:
br {
display: none;
}
If you only want to hide some within a specific heading type, just make your css more specific.
h3 br {
display: none;
}
Note: This solution only works for Webkit browsers, which incorrectly apply pseudo-elements to self-closing tags.
As an addendum to above answers it is worth noting that in some cases one needs to insert a space instead of merely ignoring <br>:
For instance the above answers will turn
Monday<br>05 August
to
Monday05 August
as I had verified while I tried to format my weekly event calendar. A space after "Monday" is preferred to be inserted. This can be done easily by inserting the following in the CSS:
br {
content: ' '
}
br:after {
content: ' '
}
This will make
Monday<br>05 August
look like
Monday 05 August
You can change the content attribute in br:after to ', ' if you want to separate by commas, or put anything you want within ' ' to make it the delimiter! By the way
Monday, 05 August
looks neat ;-)
See here for a reference.
As in the above answers, if you want to make it tag-specific, you can. As in if you want this property to work for tag <h3>, just add a h3 each before br and br:after, for instance.
It works most generally for a pseudo-tag.
If you add in the style
br{
display: none;
}
Then this will work. Not sure if it will work in older versions of IE though.
This is how I do it:
br {
display: inline;
content: ' ';
clear:none;
}
You can use span elements instead of the br if you want the white space method to work, as it depends on pseudo-elements which are "not defined" for replaced elements.
HTML
<p>
To break lines<span class="line-break">in a paragraph,</span><span>don't use</span><span>the 'br' element.</span>
</p>
CSS
span {white-space: pre;}
span:after {content: ' ';}
span.line-break {display: block;}
span.line-break:after {content: none;}
DEMO
The line break is simply achieved by setting the appropriate span element to display:block.
By using IDs and/ or Classes in your HTML markup you can easily target every single or combination of span elements by CSS or use CSS selectors like nth-child().
So you can e.g. define different break points by using media queries for a responsive layout.
And you can also simply add/ remove/ toggle classes by Javascript (jQuery).
The "advantage" of this method is its robustness - works in every browser that supports pseudo-elements (see: Can I use - CSS Generated content).
As an alternative it is also possible to add a line break via pseudo-elements:
span.break:before {
content: "\A";
white-space: pre;
}
DEMO
For me looks better like this:
Some text, Some text, Some text
br {
display: inline;
content: '';
}
br:after {
content: ', ';
display: inline-block;
}
<div style="display:block">
<span>Some text</span>
<br>
<span>Some text</span>
<br>
<span>Some text</span>
</div>
For that you can just do like this:
br{display: none;}
and if it is inside some PRE tag, then you can and if you want the PRE tag to behave like a regular block element, you can use this CSS :
pre {white-space: normal;}
Or you can follow the style of Aneesh Karthik C
like :
br {content: ' '}
br:after {content: ' '}
I think you got it
As per your question, to solve this problem for Firefox and Opera using Aneesh Karthik C approach you need to add "float" right" attribute.
Check the example here. This CSS works in
Firefox (26.0) , Opera (12.15), Chrome (32.0.1700) and Safari (7.0)
br {
content: " ";
float:right;
}
I hope this will answer your question!!
While this question appears to already have been solved, the accepted answer didn't solve the problem for me on Firefox.
Firefox (and possibly IE, though I haven't tried it) skip whitespaces while reading the contents of the "content" tag. While I completely understand why Mozilla would do that, it does bring its share of problems.
The easiest workaround I found was to use non-breakable spaces instead of regular ones as shown below.
.noLineBreaks br:before{
content: '\a0'
}
Have a look.
Yes you can ignore this <br>.
You may need this especially in case of responsive design where you need to remove breaks for mobile devices.
HTML
<h2>
Where ever you go <br class="break"> i am there.
</h2>
CSS for mobile example
/* Resize the browser window to check */
#media (max-width: 640px)
{
.break {display: none;}
}
Check out this Codepen:
https://codepen.io/fluidbrush/pen/pojGQyM
You can usedisplay:contents
br {
display:contents;
}
see https://developer.mozilla.org/en-US/docs/Web/CSS/display-box
[display:contents;] These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes [...] most browsers will remove from the accessibility tree any element with a display value of contents. [...] no longer be announced by screen reading technology.
You can simply convert it in a comment..
Or you can do this:
br {
display: none;
}
But if you do not want it why are you puting that there?
I just found the CSS #page directive, and using it with :first to apply CSS to the first page of an html print. Is there any way to go the opposite, and apply CSS to all pages except the first?
Use CSS3's :not() together with #page:
#page :not(:first) {
}
If you need better browser compatibility, Donut's solution of styling everything then "undoing" them for :first also works (relying on specificity/the cascade).
#page {
/* Styles for everything but the first page */
}
#page :first {
/* Override with perhaps your stylesheet's defaults */
}
If you're using CSS2, you can do it indirectly. Use #page to set the style that you want for all your pages except the first, then use #page along with :first to "undo" those styles for the first page.
Is there a way to add special characters ♦ through CSS styles if so can you show an example that works on most browsers?
No, it is not possible, as such.
When using :after { content: }, you cannot specify HTML tags nor entities in the content string. You can, however, specify the symbols directly. (This is because the content string is not parsed as XML/HTML, but as plain text, and is inserted verbatim.)
In other words: a:after { content: "<" } will yield the equivalent visual to Some Link<.
a:after { content: "♦" }; will work perfectly, tho'.
You can use the :after and :before pseudoelements, however they are not supported by all browsers, have a look at
http://www.w3schools.com/css/pr_pseudo_after.asp
http://www.w3schools.com/css/pr_pseudo_before.asp
You should always avoid using CSS content because it's wrong to mix presentation with content of the page.
Additionally, CSS content is not supported by some browsers, i.e. by IE6 and IE7.
If I wanted to do it, I'd use CSS to attach background image and add some HTML element around the word:
<style type="text/css">
abbr { padding-right:20px;
background:url("http://img690.imageshack.us/img690/2005/blackdiamond.png") right no-repeat; }
</style>
<abbr>Something</abbr> very very Important goes here.
Result:
The only problem is - if I can modify the HTML to wrap my word with <span> or <abbr> or any other HTML element I could probably just wrtite ♦ in the code itself... your call.
Is there any way to use conditional statements in CSS?
I'd say the closest thing to "IF" in CSS are media queries, such as those you can use for responsive design. With media queries, you're saying things like, "If the screen is between 440px and 660px wide, do this". Read more about media queries here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp, and here's an example of how they look:
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
That's pretty much the extent of "IF" within CSS, except to move over to SASS/SCSS (as mentioned above).
I think your best bet is to change your classes / IDs within the scripting language, and then treat each of the class/ID options in your CSS. For instance, in PHP, it might be something like:
<?php
if( A > B ){
echo '<div class="option-a">';
}
else{
echo '<div class="option-b">';
}
?>
Then your CSS can be like
.option-a {
background-color:red;
}
.option-b {
background-color:blue;
}
No. But can you give an example what you have in mind? What condition do you want to check?
Maybe Sass or Compass are interesting for you.
Quote from Sass:
Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.
CSS itself doesn't have conditional statements, but here's a hack involving custom properties (a.k.a. "css variables").
In this trivial example, you want to apply a padding based on a certain condition—like an "if" statement.
:root { --is-big: 0; }
.is-big { --is-big: 1; }
.block {
padding: calc(
4rem * var(--is-big) +
1rem * (1 - var(--is-big))
);
}
So any .block that's an .is-big or that's a descendant of one will have a padding of 4rem, while all other blocks will only have 1rem. Now I call this a "trivial" example because it can be done without the hack.
.block {
padding: 1rem;
}
.is-big .block,
.block.is-big {
padding: 4rem;
}
But I will leave its applications to your imagination.
The #supports rule (92% browser support July 2017) rule can be used for conditional logic on css properties:
#supports (display: -webkit-box) {
.for_older_webkit_browser { display: -webkit-box }
}
#supports not (display: -webkit-box) {
.newer_browsers { display: flex }
}
The only conditions available in CSS are selectors and #media. Some browsers support some of the CSS 3 selectors and media queries.
You can modify an element with JavaScript to change if it matches a selector or not (e.g. by adding a new class).
I would argue that you can use if statements in CSS. Although they aren't worded as such. In the example below, I've said that if the check-box is checked I want the background changed to white. If you want to see a working example check out www.armstrongdes.com. I built this for a client. Re size your window so that the mobile navigation takes over and click the nav button. All CSS. I think it's safe to say this concept could be used for many things.
#sidebartoggler:checked + .page-wrap .hamb {
background: #fff;
}
// example set as if statement sudo code.
if (sidebaretoggler is checked == true) {
set the background color of .hamb to white;
}
CSS has become a very powerful tool over the years and it has hacks for a lot of things javaScript can do
There is a hack in CSS for using conditional statements/logic.
It involves using the symbol '~'
Let me further illustrate with an example.
Let's say you want a background to slide into the page when a button is clicked. All you need to do is use a radio checkbox.
Style the label for the radio underneath the button so that when the button is pressed the checkbox is also pressed.
Then you use the code below
.checkbox:checked ~ .background{
opacity:1
width: 100%
}
This code simply states IF the checkbox is CHECKED then open up the background ELSE leave it as it is.
css files do not support conditional statements.
If you want something to look one of two ways, depending on some condition, give it a suitable class using your server side scripting language or javascript. eg
<div class="oh-yes"></div>
<div class="hell-no"></div>
There is no native IF/ELSE for CSS available. CSS preprocessors like SASS (and Compass) can help, but if you’re looking for more feature-specific if/else conditions you should give Modernizr a try. It does feature-detection and then adds classes to the HTML element to indicate which CSS3 & HTML5 features the browser supports and doesn’t support. You can then write very if/else-like CSS right in your CSS without any preprocessing, like this:
.geolocation #someElem {
/* only apply this if the browser supports Geolocation */
}
.no-geolocation #someElem {
/* only apply this if the browser DOES NOT support Geolocation */
}
Keep in mind that you should always progressively enhance, so rather than the above example (which illustrates the point better), you should write something more like this:
#someElem {
/* default styles, suitable for both Geolocation support and lack thereof */
}
.geolocation #someElem {
/* only properties as needed to overwrite the default styling */
}
Note that Modernizr does rely on JavaScript, so if JS is disabled you wouldn’t get anything. Hence the progressive enhancement approach of #someElem first, as a no-js foundation.
Changing your css file to a scss file would allow you to do the trick. An example in Angular would be to use an ngClass and your scss would look like:
.sidebar {
height: 100%;
width: 60px;
&.is-open {
width: 150px
}
}
While this feels like a bit of a hack, and may not work perfectly in all browsers, a method I have used recently combines the fact that CSS (at least in Chrome) seems to ignore invalid values set on properties, and we can set custom properties that fall back to their default value when invalid.
(Note: I haven't deeply tested this, so treat it as a hacky proof of concept/possible idea)
The following is written in SCSS, but it should work just as well in standard CSS:
.hero-image {
// CSS ignores invalid property values
// When this var is set to an image URL, the browser will ignore it
// When this var isn't set, then we will use the default fallback for the var, which is 'none'
display: var(--loading-page-background-image, none);
// This part isn't directly relevant to my 'if' example, but shows how I was actually using this custom property normally
background-image: var(--loading-page-background-image, none);
}
I'm setting the custom property from JavaScript / React, but it would likely work regardless of how you set it:
// 'true' case
const chosenLoaderUrl = "https://www.example.com/loader.png";
// 'false' case
//const chosenLoaderUrl = "";
// containerRef is just a reference to the div object, you could get this with
// jquery or however you need. Since I'm in React, I used useRef() and attached
// that to my div
containerRef.current.style.setProperty(
"--loading-page-background-image",
`url(${chosenLoaderUrl})`
);
When chosenLoaderUrl is set to my url, that url is an invalid value for the display property, so it seems to get ignored.
When chosenLoaderUrl is set to an empty value, it falls back to the default value in my var() statement, so sets display to none
I'm not sure how 'generalisable' this concept it, but figured I would add it to the other suggestions here in case it is useful to anyone.
Your stylesheet should be thought of as a static table of available variables that your html document can call on based on what you need to display. The logic should be in your javascript and html, use javascript to dynamically apply attributes based on conditions if you really need to. Stylesheets are not the place for logic.
You can use combination of jquery and css classes i.e. I want to change a font color of certain element depending on the color of the background:
CSS:
.h3DarkMode{
color: lightgray;
}
.h3LightMode{
color: gray;
}
HTML:
<h3 class="myText">My Text Here...</h3>
JQuery:
var toggleMode = localStorage.getItem("toggleMode");
if (toggleMode == "dark"){
$(".myText").removeClass("h3LightMode").addClass("h3DarkMode");
}else{
$(".myText").removeClass("h3DarkMode").addClass("h3LightMode");
}
No you can't do if in CSS, but you can choose which style sheet you will use
Here is an example :
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
will use only for IE 6 here is the website where it is from http://www.quirksmode.org/css/condcom.html , only IE has conditional comments. Other browser do not, although there are some properties you can use for Firefox starting with -moz or for safari starting with -webkit. You can use javascript to detect which browser you're using and use javascript if for whatever actions you want to perform but that is a bad idea, since it can be disabled.