I frequently use the abbr (and formerly acronym) tag on my website. But I noticed that this tag is not working on mobile/tablet devices (touch devices). So my question is: How I can make it work?
I searched on the internet for some solutions, but they aren't fully useful:
Solution 1:
abbr[title]:after
{
content: " (" attr(title) ")";
}
#media screen and (min-width: 1025px)
{
abbr[title]
{
border-bottom: 1px dashed #ADADAD;
cursor:help;
}
abbr[title]:after
{
content: "";
}
}
Solution 2:
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { $('abbr').each(function() { $(this).click(function() { alert($(this).attr('title')); }); }); }
None of them is fully satisfying! So, some alternatives are much appreciated!
here, in 2016, results of my search were the same.
but I ended up with a simple workaround: I've decided to use tooltips instead of alerts.
this example is for jQuery & bootstrap tooltips .
so, in Solution 2, after you detect mobile (do it as you wish):
$('abbr').attr('data-toggle', 'tooltip'); // add atribute to all abbrs
$('[data-toggle="tooltip"]').tooltip(); // initialize tooltips on all abbrs
Thanks to this Guy.
https://bitsofco.de/making-abbr-work-for-touchscreen-keyboard-mouse/
Here is the CSS solution to this problem.
<style>
#media screen and (min-width: 0px) {
abbr[data-title] {
position: relative;
/* ensure consistent styling across browsers */
text-decoration: underline dotted;
}
abbr[data-title]:hover::after,
abbr[data-title]:focus::after {
content: attr(data-title);
/* position tooltip like the native one */
position: absolute;
left: 0;
bottom: -30px;
width: auto;
white-space: nowrap;
/* style tooltip */
background-color: #1e1e1e;
color: #fff;
border-radius: 3px;
box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4);
font-size: 14px;
padding: 3px 5px;
}
}
</style>
The title attribute of the abbr tag will cause the duplication issue that is why we can change the title attribute with the data-title and will solve the duplication issue. To use this feature on any size i have kept the min-width to 0px
We can click the abbr tag on a mobile screen or PC screen and it will work in the same way without any duplication. I have tried it on Chrome and it's working fine.
Related
With the new Chrome update Chrome is displaying improved default form styling.
According to the post I would say it should be possible to change this form theme to match the color set of a website.
We were going for beautiful, webby, and neutral. We hope that every design system would see a bit of themselves in the new designs and easily imagine how they might be adapted for their own branding.
I have spend the last few hours searching and trying to get rid of the default blue color that has a very bad contrast with rest of my website. Aside from using '-webkit-appearance: none;' and restyling things like checkboxes myself I'm not sure if it's possible.
Does anyone experience this issue as well or have a solution or documentation I'm missing?
My preferred solution just uses css. It targets Safari as well as Chrome, but it's already grayscale anyway, so that's OK.
input[type='checkbox']:checked {-webkit-filter: grayscale(100%);}
input[type='radio']:checked {-webkit-filter: grayscale(100%);}
This is Chrome 83 upwards specific - other browsers do other things (grayscale mostly).
This construct seems to work for now - just as long as there is a background color set for "body":
input[type=checkbox] {
mix-blend-mode: luminosity;
}
Examples:
Though I am not sure this will continue to work, it might be good enough as a temporary workaround to alleviate "designer suffering". Disrupted color schemes is a crisis :-).
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Test</title>
<style>
body {
background-color: white;
}
input[type=checkbox] {
mix-blend-mode: luminosity;
}
</style>
</head>
<body>
<label><input type="checkbox" checked>Test</label>
</body>
</html>
Links:
https://www.w3schools.com/cssref/pr_mix-blend-mode.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Pure CSS solution which allows any color while trying to stay close to the new design. Just replace the --primary-color variable. Works in Chromium browsers (Chrome, new Edge) and Firefox.
:root {
--primary-color: #f44336;
}
input[type="checkbox"] {
height: 14px;
width: 14px;
position: relative;
-webkit-appearance: none;
}
input[type="checkbox"]:before {
content: "";
display: inline-block;
position: absolute;
box-sizing: border-box;
height: 14px;
width: 14px;
border-radius: 2px;
border: 1px solid #767676;
background-color: #fff;
}
input[type="checkbox"]:hover::before {
border: 1px solid #4f4f4f;
}
input[type="checkbox"]:checked:hover::before {
filter: brightness(90%);
}
input[type="checkbox"]:checked:disabled:hover::before {
filter: none;
}
input[type="checkbox"]:checked:before {
content: "";
display: inline-block;
position: absolute;
box-sizing: border-box;
height: 14px;
width: 14px;
border-radius: 2px;
border: 1px solid var(--primary-color);
background-color: var(--primary-color);
}
input[type="checkbox"]:checked:after {
content: "";
display: inline-block;
position: absolute;
top: 5px;
left: 2px;
box-sizing: border-box;
height: 5px;
width: 10px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: translateY(-1.5px) rotate(-45deg);
transform: translateY(-1.5px) rotate(-45deg);
}
input[type="checkbox"]:disabled::before {
border: 1px solid #c9ced1;
border-radius: 2px;
background-color: #f0f4f8;
}
input[type="checkbox"]:checked:disabled::before {
border: 1px solid #d1d1d1;
border-radius: 2px;
background-color: #d1d1d1;
}
<input type="checkbox"></input>
<input type="checkbox" checked="checked"></input>
<input type="checkbox" disabled="true"></input>
<input type="checkbox" disabled="true" checked="checked"></input>
Using hue-rotate() filter, one can change the background color of checked checkboxes. For example, this css makes it green:
Input[type=checkbox]:checked{filter:hue-rotate(290deg);}
Now, by adding grayscale, one can make the green color darker:
Input[type=checkbox]:checked{filter:hue-rotate(290deg) grayscale(50%);}
The brightness() filter can also help to adjust the color.
Using invert(), you can get a black checkbox, then add grayscale and brightness to get white background (which looks like a regular checkbox, only, without a border):
Input[type=checkbox]:checked{filter:invert() grayscale(100%) brightness(180%);}
It's so ugly one cannot just update the style of checkboxes :( So you need to really hide native checkbox and insert your custom element using :before
Here is the snippet using Font Awesome (free icon for checkmark \f00c)
input[type="checkbox"] {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
/* Show the border to simulate the square */
border: 1px solid #ccc;
/* Hide the native checkbox */
-webkit-appearance: none;
width: 15px;
height: 15px;
}
input[type="checkbox"]:before {
/* Show some fake element to keep the space for empty "square" */
content: "\f0c8";
color: transparent;
}
input[type="checkbox"]:checked:before {
/* Show actual checkmark */
content: "\f00c";
color: black;
}
<script src="https://kit.fontawesome.com/59ba4e0c1b.js"></script>
<input type="checkbox" checked="">I'm checked
<br>
<input type="checkbox">I'm unchecked
And here is the one with pure Unicode (which still requires some polishing to avoid jumping)
input[type="checkbox"] {
/* Show the border to simulate the square */
border: 1px solid #ccc;
/* Hide the native checkbox */
-webkit-appearance: none;
width: 15px;
height: 15px;
}
input[type="checkbox"]:before {
/* Show some fake element to keep the space for empty "square" */
content: "w";
color: transparent;
}
input[type="checkbox"]:checked:before {
/* Show actual checkmark */
content: "✓";
color: black;
}
<input type="checkbox" checked="">I'm checked
<br>
<input type="checkbox">I'm unchecked
My solution to bring back the grey/black checkboxes, targeting only desktop versions of Chrome >= 83.
if (window.chrome) {
var ua = navigator.appVersion;
if (ua.indexOf('Mobile') === -1) {
var flag = ua.indexOf('Chrome/');
if (flag !== -1) {
var version = parseInt(ua.substr(flag + 7, 2));
if (version >= 83) {
var chromeStyle = document.createElement('style');
chromeStyle.type = 'text/css';
chromeStyle.innerText = 'input[type="checkbox"] {-webkit-filter: brightness(0.9);} input[type="checkbox"]:checked {-webkit-filter: grayscale(100%) invert(100%) brightness(1.3);}';
document.head.appendChild(chromeStyle);
}
}
}
}
This change in widget appearance from Chrome 81 to Chrome 83 really badly affected my Gui, in p5.js. I found a way to revert to Chrome 81 style, I don't know how long it will remain available. Put this in your Chrome address bar ..
chrome://flags/#form-controls-refresh
It brings up a bunch of internal options .. set the Web Platform Controls updated UI ie. the one you land on, to Disabled. Have to then restart the browser. This gets rid of all the "improvements", including the awful bright blue slider mentioned above.
Thanks to a Reddit poster for the info, which I've lost the URL of.
(My environment: Mac, Mojave 10.14.6, Chrome 83.0.4103.106). (Also now 83.0.4103.116, latest at 25 June 2020).
Ciao e Buona Fortuna.
In Chrome 91, maybe you can try the accent-color CSS keyword, which allows web developers to specify the accent color for UI controls (e.g. checkbox, radio button) generated by the element.
The accent-color CSS property is currently experimental. Please enable chrome://flags/#enable-experimental-web-platform-features to test it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<style>
input[type="checkbox"] {
accent-color: red;
}
</style>
<body>
<input type="checkbox" />
</body>
</html>
I thought I was going to need to use -webkit-appearance: none;, but turns out it is not necessary. Also, using JavaScript and/or filter is unnecessary.
Here is where I landed: https://codepen.io/colorful-tones/pen/NWxZpBb
Use:
input[type="checkbox"] {
-webkit-appearance: none;
}
Then just style it the way you want.
As for the checked state you can use :before pseudo element with font icon like Fontawesome or with an image like so:
input[type="checkbox"]:checked:before {
content: '';
width: 14px;
height: 14px;
position: absolute;
background: url(check.png) no-repeat center 3px transparent #ff0000;
}
How can I remove the arrow appear in frone of tags input as shown in image
demo here: https://colorlib.com/polygon/gentelella/form.html
I see that on other page here, that the Daily active users '.tag' has the arrow that's been bothering you.
I suggest that you extend the .tag class and add the pseudo code for the arrow
ul{
&.timeline{
li{
.tag{
#extend .tag;
&:after{
/* add code for arrow here */
}
}
}
}
}
or
simply hide the tag by selecting a specific parent like this:
.tagsinput .tag:after {
display: none;
}
By using the inspector / developer console on your browser you can see that the arrow is generated by:
.tag:after {
content: " ";
height: 30px;
width: 0;
position: absolute;
left: 100%;
top: 0;
margin: 0;
pointer-events: none;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 11px solid #1ABB9C
}
Inspector claims this is part of custom.min.css beginning at line 2,922.
This arrow was probably supposed to appear directly adjacent to the actual tag, but it looks like position:relative is missing from key elements as well as other aspects of .tag being re-defined throughout the CSS.
See this code example: http://jsfiddle.net/Z2BMK/
Chrome/IE8 look like this
Firefox looks like this
My CSS is
button {
padding:0;
background:#080;
color:white;
border:solid 2px;
border-color: #0c0 #030 #030 #0c0;
margin:0;
}
How can I change the code sample to make the button the same in both browsers? I do not want to use JavaScript based hyperlinks because they do not work with space bar on keyboard and it has to have an href URL which is not a clean way to handle things.
My solution, since Firefox 13
button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }
Add this:
button::-moz-focus-inner {
padding: 0;
border: 0
}
http://jsfiddle.net/thirtydot/Z2BMK/1/
Including the border rule above is necessary for buttons to look the same in both browsers, but also it removes the dotted outline when the button is active in Firefox. Lots of developers get rid of this dotted outline, optionally replacing it with something more visually friendly.
To fix it on input elements as well add
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner
is simple perfect!
Corrected version of #thirtydot's answer:
button:: {
padding: 0px;
border: 0px;
}
button::-moz-focus-inner {
padding: 0px;
border: 0px;
}
Regarding Firefox 87:
button in button::-moz-focus-inner cannot be a class. (E.g. .mybutton::-moz-focus-inner does not work)
There must be a button { padding:0px; border: 0px; } style present as well (This style can be given per class).
I want to customize the looks of the range input type in HTML5 to look something like a progress bar. I've tried applying some common CSS attributes using CSS class but it seems that they are not working.
Can any one direct me how to customize it??
input[type='range'] {
-webkit-appearance: none !important;
background:red;
height:7px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
background:blue;
height:10px;
width:10px;
}
If you're using HTML 5, why not use the progress tag?
<progress value="1534602" max="4603807">33%</progress>
EDIT: nowadays all major browser support both
<progress>
input[type='range']
Hence you should use one of these two, as explained in other answers, and this should not be the accepted answer anymore.
The <input type="range"> is pretty new and you are already attempting to customize it with CSS. :)
I wouldn't try that for two reasons:
there might be huge compatibility issues now and for the next few (or many) years.
Think that in nowadays a form control like <select> (available since the web started) is still problematic to be customized with CSS in a cross browser way. For instance if you set a padding for the select boxes, many browser (IE7, OPERA9, CHROME5, SAFARI4) will totally ignore the padding.
It works only IE8 and on FF 3.6. (all tests done with HTML5 DOCTYPE so in standard mode).
The <input type="range"> has been created to show a slider NOT a progress bar, attempting to cheat on it with CSS in order to transform a slider into progress bar it sounds bizarre. Like trying to use CSS to change a <textarea> into a table, but why don't you simply use a <table> to render tables?!
To show a progress bar in HTML5 you should follow the suggestion given by marcgg in his answer. Since no browser is currently rendereing it you could use a simple div with a p inside like this:
<div id="progress" style="position:relative; width:100px; height:20px; border:1px solid #cccccc;">
<p style="position:absolute; left:0; top:0; background-color:#0000ff; height:100%; width:30%; font-size:0px;"> </p>
</div>
Then simply update the style.width of inner P element in percent like:
width: 75%
FYI: if you want to do that in simple JS here is the code:
document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';
I did a cross-browser solution (+IE9, FF, Chrome, Safari), only CSS.
[Updated 24.11.2016]
http://codepen.io/nlfonseca/pen/MwbovQ
#import 'bourbon';
$slider-width-number: 240;
$slider-width: #{$slider-width-number}px;
$slider-height: 2px;
$background-slider: #c7c7c7;
$background-filled-slider: #e33d44;
$thumb-width: 28px;
$thumb-height: 18px;
$thumb-radius: 8px;
$thumb-background: #fff;
$thumb-border: 1px solid #777;
$shadow-size: -8px;
$fit-thumb-in-slider: -8px;
#function makelongshadow($color, $size) {
$val: 5px 0 0 $size $color;
#for $i from 6 through $slider-width-number {
$val: #{$val}, #{$i}px 0 0 $size #{$color};
}
#return $val;
}
div {
height: 100px;
display: flex;
justify-content: center;
}
input {
align-items: center;
appearance: none;
background: none;
cursor: pointer;
display: flex;
height: 100%;
min-height: 50px;
overflow: hidden;
width: $slider-width;
&:focus {
box-shadow: none;
outline: none;
}
&::-webkit-slider-runnable-track {
background: $background-filled-slider;
content: '';
height: $slider-height;
pointer-events: none;
}
&::-webkit-slider-thumb {
#include size($thumb-width $thumb-height);
appearance: none;
background: $thumb-background;
border-radius: $thumb-radius;
box-shadow: makelongshadow($background-slider, $shadow-size);
margin-top: $fit-thumb-in-slider;
border: $thumb-border;
}
&::-moz-range-track {
width: $slider-width;
height: $slider-height;
}
&::-moz-range-thumb {
#include size($thumb-width $thumb-height);
background: $thumb-background;
border-radius: $thumb-radius;
border: $thumb-border;
position: relative;
}
&::-moz-range-progress {
height: $slider-height;
background: $background-filled-slider;
border: 0;
margin-top: 0;
}
&::-ms-track {
background: transparent;
border: 0;
border-color: transparent;
border-radius: 0;
border-width: 0;
color: transparent;
height: $slider-height;
margin-top: 10px;
width: $slider-width;
}
&::-ms-thumb {
#include size($thumb-width $thumb-height);
background: $thumb-background;
border-radius: $thumb-radius;
border: $thumb-border;
}
&::-ms-fill-lower {
background: $background-filled-slider;
border-radius: 0;
}
&::-ms-fill-upper {
background: $background-slider;
border-radius: 0;
}
&::-ms-tooltip {
display: none;
}
}
You can in Webkit, through the -webkit-slider-thumb pseudo-element: http://jsfiddle.net/leaverou/BNm8j/
input[type=range] {
-webkit-appearance: none;
background-color: silver;
width: 200px;
height:20px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #666;
opacity: 0.5;
width: 10px;
height: 26px;
}
<input type="range" min="0" max="100" />
Although the others are right about input type="range" not being the right element for the job.
You should use the <progress> element and for browsers that don't support it, this polyfill: http://lea.verou.me/polyfills/progress/
You can edit the CSS of the range input, using input[type="range"]::-webkit-slider-thumb and input[type="range"].
Here is the example of it,
http://webstutorial.com/range-input-slider-html5-css3/html-5
I know this is already answered but just sharing it.
jQuery Tools provides a plug-in that creates stylable elements from a range input, and what's more, makes it still work as a slider in older browsers that don't support input[type=range].
Allows you to style:
the handle
the slider
optional progress fill
value output field
I've used it many times and it's a great tool.
WARNING: doesn't work on touch devices. I don't have as much experience with it, but you could try the jQuery mobile slider: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/
http://jquerytools.github.io/demos/rangeinput/index.html
When I looked at this question I needed something simple. There are already a number of framework answers on how to do this, but sometimes it is more lightweight and flexible just to create your own. Of course, you get a certain amount for free with a framework (and it is often the right choice if it is a good fit), but you then have to worry about framework compatibility, support and digging into the depths of the framework to go outside its boundaries.
Here is a simple javascript-only slider. Basically it is an img for the slider, an img for the button and a callback with a progress percent. Not an all-singing and dancing slider, but something simple to build on.
The demo
The HTML
<div id='bb_sliderContainer' ondragstart="return false;" ondrop="return false;">
<img id='bb_slider' src='slider.png'/>
<img id='bb_sliderButton' src='sliderbutton.png'/>
</div>
The script
Place in a javascript file:
(function(bb,undefined){
bb.Slider = function(buttonCssId,sliderCssId,initialPercentage,progressUpdate)
{
var halfButtonWidth = 5;
var sliderMoving = false;
var buttonElement = document.getElementById(buttonCssId);
var sliderElement = document.getElementById(sliderCssId);
var length = sliderElement.clientWidth;
var leftPos = 0;
var rightPos = leftPos + length;
length = rightPos - leftPos;
if( initialPercentage )
{
var buttonPos = leftPos + initialPercentage / 100 * length;
buttonElement.style.left = buttonPos - halfButtonWidth + 'px';
}
buttonElement.addEventListener( 'mousedown', function(){
sliderMoving = true;
} );
document.addEventListener( 'mousemove', function(event){
if( sliderMoving == true )
{
var rect = sliderElement.getBoundingClientRect();
var mouseX = event.clientX - rect.left;
var prop = mouseX / length;
if( prop < 0 )
{
prop = 0;
mouseX = 0;
}
if( prop > 1 )
{
prop = 1;
mouseX = length;
}
buttonElement.style.left = leftPos + prop * length - halfButtonWidth + 'px';
progressUpdate(prop * 100);
}
});
document.addEventListener( 'mouseup', function(){
sliderMoving = false;
});
}
}(window.bb = window.bb || {}));
Example use
HTML:
<img src='space.png' style='width:50%;position:relative;top:20px' id='bb_sliderSubject'>
Javascript:
function sliderUpdate(percentage)
{
var sliderSubject = document.getElementById('bb_sliderSubject');
sliderSubject.style.width = percentage + '%';
}
window.onload=function()
{
var slider = new bb.Slider('bb_sliderButton','bb_slider',50,sliderUpdate);
}
This is an example:
input[type='range'] {
-webkit-appearance: none;
border-radius: 5px;
box-shadow: inset 0 0 5px #333;
background-color: #999;
height: 10px;
vertical-align: middle;
}
input[type='range']::-moz-range-track {
-moz-appearance: none;
border-radius: 5px;
box-shadow: inset 0 0 5px #333;
background-color: #999;
height: 10px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
border-radius: 20px;
background-color: #FFF;
box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
border: 1px solid #999;
height: 20px;
width: 20px;
}
input[type='range']::-moz-range-thumb {
-moz-appearance: none;
border-radius: 20px;
background-color: #FFF;
box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
border: 1px solid #999;
height: 20px;
width: 20px;
}
<input type="range">
See http://afarkas.github.io/webshim/demos/demos/webforms/styler/index.html?range
It's a tool that produces cross-browser code to style both native and webshims range inputs like you want.
.ws-range, input[type="range"] {
/* Range styles: width, height, border-radius, background */
-webkit-appearance: none;cursor: pointer;border: 0;outline: none;padding: 0;margin: 20.5px 0;
}
.ws-range .ws-range-thumb {
/* Thumb styles: width, height, border, border-radius, background */
}
.ws-range.ws-focus .ws-range-thumb {
/* Thumb focus styles: border-color, background */
}
.ws-range.ws-active .ws-range-thumb {
/* Thumb active styles: border-color, background */
}
.ws-range .ws-range-min {
/* Thumb progress styles: display, background */
border-radius: /* same as range */;
height: 100%;
}
input[type="range"]::-moz-range-track {
border: none;background: transparent;
}
input[type="range"]::-ms-tooltip {
display: none;
}
input[type="range"]::-webkit-slider-thumb {
/* Thumb styles: width, height, border, border-radius, background */
-webkit-appearance: none;
}
input[type="range"]::-ms-track {
/* Range styles: width, height, border-radius, background */
color: transparent;border: 0;
}
input[type="range"]::-moz-range-thumb {
/* Thumb styles: width, height, border, border-radius, background */
}
input[type="range"]::-ms-thumb {
/* Thumb styles: width, height, border, border-radius, background */
}
input[type="range"]:focus::-webkit-slider-thumb {
/* Thumb focus styles: border-color, background */
}
input[type="range"]:focus::-moz-range-thumb {
/* Thumb focus styles: border-color, background */
}
input[type="range"]:focus::-ms-thumb {
/* Thumb focus styles: border-color, background */
}
input[type="range"]:active::-webkit-slider-thumb {
/* Thumb active styles: border-color, background */
}
input[type="range"]:active::-moz-range-thumb {
/* Thumb active styles: border-color, background */
}
input[type="range"]:active::-ms-thumb {
/* Thumb active styles: border-color, background */
}
input[type="range"]::-moz-range-progress {
/* Thumb progress styles: display, background */
border-radius: /* same as range */;
height: 100%;
}
input[type="range"]::-ms-fill-lower {
/* Thumb progress styles: display, background */
border-radius: /* same as range */;
height: 100%;
}
.no-cssrangeinput input[type="range"] {
background: transparent;margin: 0;border: 0;min-height: 51px;
}
What are the most useful media="print"-specific, cross-browser-compatible CSS properties?
I think we have these 5 properties for print specific.
page-break-before
page-break-after
page-break-inside
widows
orphans
Please explain when and where to use these? Which are cross browser compatible? and what are other common CSS properties can be useful in print, other than display:none?
I use the famous A list apart article (CSS Design: Going to Print) and this article when I need to make a printable version of a page. There are some common tags, but a lot depends on the css model (as well as container padding and margins) you are using:
body {
background: white;
font-size: 12pt;
}
#menu {
display: none;
}
#wrapper, #content {
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent none;
}
div#content {
margin-left: 10%;
padding-top: 1em;
border-top: 1px solid #930;
}
div#mast {
margin-bottom: -8px;
}
div#mast img {
vertical-align: bottom;
}
a:link, a:visited {
color: #520;
background: transparent;
font-weight: bold;
text-decoration: underline;
}
#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
#content a[href^="/"]:after {
content: " (http://www.alistapart.com" attr(href) ") ";
}
I use the following:
/* Browser will TRY to avoid spanning content within across a page */
tr, td, th {page-break-inside:avoid}
/* Repeat table headers when table spans a page */
thead {display:table-header-group}
/* Apply to anything you don't want to print */
.NoPrint {visibility:hidden; display:none}
Chris Coyier at css-tricks.com wrote a great article on this:
http://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/
In the spirit of sharing, here's a couple of rules I regularly use. They fit in well with SemanticUI, but may be helpful elsewhere
[class*="printed only"] {
display: none;
}
#media print {
.printed {
display: initial !important;
opacity: 1 !important;
}
[class*="non printed"] {
display: none !important;
opacity: 0 !important;
}
}
Display on screen and print
Use class="printed". This is handy when you have tabs in your UI, so you can force them to be printed even if they aren't currently being displayed
Display on screen but don't print
Use class="non printed". This is handy for navigation elements and other stuff you don't want to print
Don't display on screen but print
Use class="printed only". I find it handy to include some metadata about a webpage on the printed version that might be irrelevant to the web version - eg the date/time the page was generated, the username of the person that printed the document, a link (if removed from headers) and soforth.