CSS Styles
From TheBeard Science Project Wiki
Contents
Apply CSS Based on Attribute
This just seems like less typing to me. Why type out class="something"? Especially in a wiki where you have to type it all the time.
CSS:
div[red] {
color: red;
}
div[blue] {
color: blue;
}
HTML:
<div red>
This should be red.
</div>
<div blue>
This should be blue.
</div>
RESULT:
This should be red.
This should be blue.
Absolute Center (via Flexbox)
.absolute-center {
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
Wrap Text in <pre> Tag
/* wrap text in pre tag, good for mobile because pre won't extend beyond screen width */
pre.wrap {
white-space: pre-wrap; /* Since CSS 2.1 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Collapsible Section
<!DOCTYPE html>
<html>
<head>
<title>TEST 2</title>
<style>
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
body {
font-family: "Open Sans";
}
.collapse-link {
display: table;
color: #888;
text-decoration: none;
margin-bottom: 10px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.collapse-link:hover {
color: #000;
text-decoration: none;
cursor: pointer;
}
.collapse-link:after {
content: '\00276f';
display: inline-block;
}
.collapse-link-expanded {
display: table;
color: #888;
text-decoration: none;
margin-bottom: 10px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.collapse-link-expanded:hover {
color: #000;
text-decoration: none;
cursor: pointer;
}
.collapse-link-expanded:after {
content: '\00276f';
display: inline-block;
transform: rotate(90deg);
}
.collapsible {
display: none;
}
.collapsible-expanded {
display: block;
padding: 0px 20px 30px 20px;
}
</style>
<script>
function ToggleCollapsible(link, boxId) {
box = document.getElementById(boxId);
if (link.className == "collapse-link") {
link.className = "collapse-link-expanded";
}
else {
link.className = "collapse-link";
}
if (box.className == "collapsible") {
box.className = "collapsible-expanded";
}
else {
box.className = "collapsible";
}
}
</script>
</head>
<body>
<a class="collapse-link" onclick="ToggleCollapsible(this, 'options')">More Options </a>
<div id="options" class="collapsible">
<ul>
<li><a href="#">Some Option</a></li>
<li><a href="#">Some Other Option</a></li>
</ul>
</div>
</body>
</html>