I am studying a free css template called zerofour found at http://html5up.net/zerofour/, and running across a css coding that I have never seen before. In the HTML, some divs have class such as "4u", but when I check the css files, this is the only text section that has anything with those terms, and it looks like this:
/* Grid */
/* Cells */
.\31 2u { width: 100% }
.\31 1u { width: 91.6666666667% }
.\31 0u { width: 83.3333333333% }
.\39 u { width: 75% }
.\38 u { width: 66.6666666667% }
.\37 u { width: 58.3333333333% }
.\36 u { width: 50% }
.\35 u { width: 41.6666666667% }
.\34 u { width: 33.3333333333% }
.\33 u { width: 25% }
.\32 u { width: 16.6666666667% }
.\31 u { width: 8.3333333333% }
.\-11u { margin-left: 91.6666666667% }
.\-10u { margin-left: 83.3333333333% }
.\-9u { margin-left: 75% }
.\-8u { margin-left: 66.6666666667% }
.\-7u { margin-left: 58.3333333333% }
.\-6u { margin-left: 50% }
.\-5u { margin-left: 41.6666666667% }
.\-4u { margin-left: 33.3333333333% }
.\-3u { margin-left: 25% }
.\-2u { margin-left: 16.6666666667% }
.\-1u { margin-left: 8.3333333333% }
When I remove the 4u class using chrome developer, the page is affected. However, when I delete this section from the css file, nothing happens. I am quite stumped in this, and it is really bugging me!
Read this spec: http://www.w3.org/International/questions/qa-escapes#cssescapes. The characters following the back slash represent a unicode code point. The space is required if the next character is allowed as part of the hexadecimal values.
It looks like something similar to Foundation. I'm new to Html5up as well but that's my guess. How it normally works (in Foundation at least) you have a "row" which is the entire width of your page (normally). Within that row you have columns (or "u" here for some reason), with each column taking up the same % of width. Usually the standard for Foundation is 12 columns/row and I'm guessing its the same here. So basically if you want the first 50% of a row to be a giant div followed by two divs that split the remaining 50% it would look like:
<div class="row">
<div class="6u">
Big Div Here.
</div>
<div class="3u">
Small Div Here.
</div>
<div class="3u">
Small Div here (same size as the other small div)>
</div>
</div> (This ends the row).
The reason for all this madness being it makes it way easier to make your page responsive (which is one of the main points of Foundation and HTML5Up).
Looking into Foundation's Dev Docs for a more in-depth explanation and additional examples (despite it not necessarily being Foundation) - Here
It's the first time that I see class names like this and I wondered about the meaning. The W3C page says:
In CSS 2.1, a backslash (\) character can indicate one of three types
of character escape. Inside a CSS comment, a backslash stands for
itself, and if a backslash is immediately followed by the end of the
style sheet, it also stands for itself (i.e., a DELIM token). First,
inside a string, a backslash followed by a newline is ignored (i.e.,
the string is deemed not to contain either the backslash or the
newline). Outside a string, a backslash followed by a newline stands
for itself (i.e., a DELIM followed by a newline).
Second, it cancels the meaning of special CSS characters. Any
character (except a hexadecimal digit, linefeed, carriage return, or
form feed) can be escaped with a backslash to remove its special
meaning. For example, "\"" is a string consisting of one double quote.
Style sheet preprocessors must not remove these backslashes from a
style sheet since that would change the style sheet's meaning.
Third, backslash escapes allow authors to refer to characters they
cannot easily put in a document. In this case, the backslash is
followed by at most six hexadecimal digits (0..9A..F), which stand for
the ISO 10646 ([ISO10646]) character with that number, which must not
be zero. (It is undefined in CSS 2.1 what happens if a style sheet
does contain a character with Unicode codepoint zero.) If a character
in the range [0-9a-fA-F] follows the hexadecimal number, the end of
the number needs to be made clear. There are two ways to do that:
with a space (or other white space character): \26 B (&B) [...]
Note: Backslash escapes are always considered to be part of an
identifier or a string (i.e., \7B is not punctuation, even though
{ is, and \32 is allowed at the start of a class name, even though
2 is not). The identifier te\st is exactly the same identifier as
test.
So as far as I can understand, the \3+number+space part here is used to be able to use numbers only as class names.
html5up.net uses a framework called skel to make the layouts responsive.
If your question is "how do I make sense of these classes" rather than "how do these escape sequences work", then the reference you're looking for is at https://github.com/n33/skel/blob/master/docs/skel-layout.md#usage-1.
I think this type of css is used for mobile Compatibility.
Related
Imaging this markup for a dialogue:
<p><q>Come here!</q> he said. <q>Why is taking you so long?</q></p>
Now, to punctuated this paragraph base on Spanish grammar, the output must be:
—Come here! —he said—. Why is taking you so long?
(Notice the position of the em-dashes, the spaces around them, and the period in the description.)
Is there a pure-CSS solution to output this without changing the HTML?
[In English, the quotation marks surround the spoken text. In Spanish, however, after the initial em-dash (with no spaces around it) the description is the one being surrounded, by two em-dashed with no spaces in the inside.]
You can sort of fake the quotation marks with some psuedo elements, taking care of deleting the last one.
p{font-size:1.5em;}
q:before{
content: "— ";
}
q:after {
content: " —";
}
q:last-of-type:after {
content: "";
}
<p><q>Come here!</q> he said. <q>Why is taking you so long?</q></p>
Moving the dot cannot be done with pure CSS, or I cannot think any way to do so atm. I believe you'll need to parse it either server-side or with some javascript
Edit:
Well, there might be a way, but this is ridiculously specific.
p{font-size:1.5em;}
q:before{
content: "—. ";
margin-left:-12px;
background:white;
}
q:first-of-type:before{
content: "—";
}
q:after {
content: " —";
margin-right:-4px;
}
q:last-of-type:after {
content: "";
}
<p><q>Come here!</q> he said. <q>Why is taking you so long?</q></p>
That's pulling the dashes towards the clarification (in a px based arbitrary magic number, which depends totally on the selected font and it's size), then using background-color (which should match the true background) to paint over the actual dot liquid paper style, and adding the dot after the dash on each quote start that's not the very first.
So as I said, ridiculously specific, and fragile. The moment you change the font, font-size or background-color, or simply have a clarification that doesn't end on ". ", it will break.
So, here's my problem: I'm creating a website where I've some posts. In those posts, I put a "::first-letter" highlighting to make it bigger, and it works perfectly.
But, when I'm going to load a post with first letter as a Unicode Emoticon that is a UTF-8 mb4 (2 Unicode Chars), it fails, by trying to load the single char as 2 separated, so the result is something strange.
This is a screenshot:
How can you see, there's a bigger letter and one smaller that are unknown, and then the same emoticon visible, because I created a post with the same emoticons wrote down 2 times.
.first_letter_post::first-letter {
float: left;
padding-right: 20px;
padding-top: 0px;
margin-bottom: -15px;
margin-top: -10px;
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
}
<p class="first_letter_post">🗿foobar</p>
This is the character: 🗿, and I'm using Google Chrome.
I hope someone can help me with this.
Chrome has a long know history of problems with unicode [bug]. This issues is a combination of those problems:
Failing to correctly recognize symbols consisting of more than 3 bytes.
Styling symbols regardless of being a letter unit
This results in Chrome tearing a single symbol apart.
IE is correctly recognizing unicode symbols consisting of multiple codepoints and applies the styling regardless of the spec stating that ::first-letter should be applied to typographic letter units only.
Firefox behaves very strict to the spec, not applying styles to non-letter units. I could not determine whether the Alphanumeric Supplement Space should be treated as letter as well, but Firefox is not treating them as such.
This means, that you should refrain from using ::first-letter when you are heavily relying on it and know that those characters might occur.
A possible solution I could think of, is manually detecting the first character via javascript and wrapping it in a tag and then apply the styles. My solution is a bit messy due to the hard coded hex value, but it might be sufficient.
// manually wrapping the "first character"
Array.prototype.forEach.call(document.querySelectorAll("div"),function(el){wrapFirstChar(el)});
function wrapFirstChar(div){
let content = div.innerHTML,chars=content.charCodeAt(0) >= 55349?2:1;
div.innerHTML = "<span>"+content.substring(0,chars)+"</span>"+content.substring(chars);
}
// this is what javascript sees at the first two positions of the string
//Array.prototype.forEach.call(document.querySelectorAll("p"),(e)=>console.log(e.innerHTML.charCodeAt(0)+"+"+e.innerHTML.charCodeAt(1)));
p::first-letter {
font-weight: bold;
color:red;
}
span {
font-weight: bold;
color:blue;
}
p{
margin:0;
}
<h2>using ::first-letter</h2>
<p>🗿 4 bytes symbol</p>
<p>🅰 Enclosed Alphanumeric Supplement 1F170</p>
<p>𝞹 Mathematical Alphanumeric Symbols 1D7B9</p>
<p>𞸀 Arabic Mathematical Alphabetic Symbols 1EE00</p>
<p>a normal character (1 byte)</p>
<h2>manually replaced</h2>
<div>🗿 4 bytes symbol</div>
<div>🅰 Enclosed Alphanumeric Supplement 1F170</div>
<div>𝞹 Mathematical Alphanumeric Symbols 1D7B9</div>
<div>𞸀 Arabic Mathematical Alphabetic Symbols 1EE00</div>
<div>a normal character (1 byte)</div>
I have a long chunk of text which is a file path within a td that causes the whole thing to be 600+pixels wide, when I want to be fit within 200 px.
I can enable word-break:break-all and have it display the whole thing breaking between characters but then it cuts the folder names in half.
So, ideally I'd like to break the lines only upon '/' or '\' characters. Is that possible?
Thank you!
No, you can’t; there is no CSS construct for such purposes at present.
What you can do to suggest allowed line break points is to use a <wbr> tag or a zero-width space after each “/” or “\”. You could do this dynamically with JavaScript, traversing the relevant text nodes.
I don't think you can do this with CSS alone. But here is a way to do it using JQuery:
function (yourObject) {
yourObject.html(yourObject.html()
.replace(///g, '<br>')
.replace(/\/g, '<br>'));
}
This is assuming that your object doesn't contain html within it. If it does, it would replace the slashes, so you would need to check for a > following the slash.
A better solution might be to wrap the long text in a container element that allows scrolling, like StackOverflow does with code blocks:
.longtext {
width: 100%;
display: block;
word-break: none;
overflow: auto;
background: #eee;
}
http://jsfiddle.net/mblase75/NCNSa/
Here is the code I have a question about
.store {
display: block;
position: relative;
}
.store:before, .store:after {
display: block;
position:absolute;
content:'';
}
.store:before {
background: url(store-before.png);
height: 23px;
width: 54px;
top:-3px;
left:-3px;
}
.store:after {
background: url(store-after.png);
height: 20px;
width: 41px;
bottom:-3px;
right:-3px;
}
I noticed that when the "content" is anything besides two apostrophes, the before and after images don't show up. Can somebody explain the meaning of the two apostrophes? Thanks.
The Generated content, automatic numbering, and lists section of the CSS2.1 specification explains this:
Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.
content is what is added to the page. If no content is specified, nothing is added to the page at all (meaning that ultimately no styling gets applied). content: '' adds empty string content to the page.
The two apostrophes denote a string. Two double quotes denote a string as well, which delimiter you use depends on preference and escaping needs; see here for all the details.
If there's nothing between the two string delimiters, either '' or "", then you have an empty string. If you have anything besides a string, it's some other value which may or may not be valid. See here for all the possible values for content. If you pass an invalid value, then like any other style declaration the browser will ignore it, and without any valid value content will default to normal, which is really none for the :before and :after pseudo-elements. That will prevent your pseudo-element from displaying.
To use the before and after elements, it needs to have some form of content before it will show the element, so you can use an empty string to pretend to be something there, obviously a space or empty will show nothing on the page, so you just get the rest of your css styling.
If you remove the content property then it wont show at all.
Its meant to be used for things like "..." or "read more" I imagine without having to have that in your html markup.
Your particular code snippet is probably using it for clearing.
How ever you can use it to put repeating content next to elements like so:
span:before{
content:"Author: "
}
<span>Huckleberry Finn</span>
Will result in:
Author: Huckleberry Finn
Is there a maximum number of caracters for the name of a class in CSS ?
.thereisnomaximumlengthforaclassnameincss {
maxlength: no;
}
Good luck!
There is no maximum length it says.
No maxiumum.
Basically, a name may start with an underscore (_), a dash (-), or a letter(a–z), and then be immediately followed by a letter, or underscore, and THEN have any number of dashes, underscores, letters, or numbers:
-?[_a-zA-Z]+[_a-zA-Z0-9-]*
Don't forget about bandwidth. It may not seem to make a difference but one css file with 30 classes with long names can add up to a big performance issue on a large site
W3C Schema for CSS 2.1 -
http://www.w3.org/TR/CSS21/
Also, I used their CSS validator with a really long class name... it passed validation -
http://jigsaw.w3.org/css-validator/
To add to what others have written, would just like to add if - like me - you find you sometimes end up with crazy long names (because you like being descriptive) then it's worth bearing in mind selectors, which also promotes style re-use and helps keep things easy to read.
e.g.
h1 {
1.5em;
}
styledParagraph {
font-size: 1em;
}
/* Override the default font size if the styledParagraph element is inside an element with the class articlePage */
.articlePage .styledParagraph {
font-size: 1.5em;
}
/* Make all <h1> elements in .articlePage -> . styledParagraph larger than the default */
.articlePage .styledParagraph h1 {
font-size: 2em;
}
This is very widely supported (even in MSIE 6) and it's much easier to read than a class name like .articlePageStyleParagraphHeading.
Similar to this question on ID names in HTML as well. Seems like there is no "practical" limit.
I say keep them as short as possible, while still being descriptive - why even flirt with crazy-long names? :)