Is there a shortcut for three code hexcodes, example, black can be wrote two ways
.black{color:#000}
.black{color:#000000}
Can #DBDBDB this be wrote shorter? As #DBD does not work.
Also what is faster, does it matter, I notice Firebug spits colors and some other vars in case sensitive format. Does it matter? Is it faster to have everything lowercase so the browser and user can load and render faster?
.webform{color:#dbdbdb}
.WebForm{color:#DBDBDB}
Can #DBDBDB this be wrote shorter? As #DBD does not work.
No. The only things shorter than a 6-hex colour codes are 3-hex codes (which only work for XXYYZZ colours) and (some) named colours (and there isn't one that matches #DBDBDB).
Also what is faster
Stop micro-optimising. If there is a difference it won't be a significant one and will probably vary from browser to browser.
The simple answer is it makes no perceivable difference. This is a classic case of over-thinking optimisation.
There are actually lots of ways of specifying black:
.black{color:#000}
.black{color:#000000}
.black{color:black;}
.black{color:rgb(255,0,0);}
http://www.w3.org/TR/CSS21/syndata.html#color-units
I would be very surprised if there were any measurable speed difference between the accuracies in any browser.
#DBDBDB cannot be written more compactly, it's equivalent to: rgb(219,219,219). In the shorter notation the closest you could come would be #DDD which is equivalent to rgb(221,221,221).
In the three letter abbreviations each letter is duplicated, so #DBD becomes #DDBBDD. You can't shorten codes like #DBDBDB.
There is no performance difference between uppercase and lowercase letters.
#DBDBDB can not be written shorter.
There is no difference in speed.
Lowercase and uppercase have no difference in performance, but it's worth mentioning that shorthand hexadecimal colors could reduce css file size to some tiny extent, which helps save bandwidth more or less.
Related
I am playing around with designing my own grid system. I decided to go with something that splits columns on percentage i.e. 10% 20% 30% etc. So I have Col-10 for a column that is 10%.
However, instead of doing a lot of coding, I want instead to use some sort of additive method. Think of it like money.
You have 100 note, a 50 note, a 20 note, a 10 note a 5 note and a bunch of small coins usually of the same denomination 100p coin, 50p coin, 20p coin, 10p coin, 5p coin and of course the all important 2p and 1p.
There is no 77 note. That would be made of 50, 20, and 5 notes, and 2 x 100p coins.
I want to do likewise with CSS. Instead of defining and using a specific width, lets say I want a column of width 77%. I would like to be able to do a class like this:
<div class="Col-50 Col-20 Col-5 Col-2">Content</div>
and in my CSS I would have these classes defined according to their respective percentages.
My problem is. The last class here, would be all that is applied. giving me a 2% column instead of the 77% column I intended.
Is there any magic CSS trick that will allow me to do some sort of additive % like what I am thinking or is this a JavaScript the only option.
I could do this in JavaScript but I want to avoid using JavaScript / jQuery or other code apart from HTML5/CSS3 at all costs because I want to remove external dependencies. While rare, it is still possible to disable JavaScript in browsers and I want my system to work without it if possible.
I also know I could us SCSS / LESS etc but ultimately the end result would be a very large CSS file filled with almost every % between 0 and 100. This is not my goal.
I don't believe this is possible with CSS alone. CSS is a styling language, so (with the exception of calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc) it doesn't have math calculations. It really isn't designed to compound values in that matter. Even a preprocessor like SASS/Less, I don't believe, would be able to accomplish that since the preprocessing is on the CSS side, not the HTML side. Perhaps an HTML preprocessor?
Either way, I'm not sure I follow the benefit of the class; adding 4 classes just to specify a width seems superfluous.
Maybe if they come out with "Compounding Style Sheets"? :)
no it isn't possible, At some point you would have to have 100 classes for the width. If you are set on staying css only. I would write a CSS generator that basically loops through and creates the redundant code and saves it to a file for you. Then you could go in and add to the file as needed.
My HTML page contain tables with many negative numbers, like –0.25 . 8211 is the n-dash. Because my document is supposed to become epub2 eventually, javascript is not allowed. only xhtml+css.
Unfortunately, both ebook readers and the print function in Chrome think that it is a reasonable idea to line-break a negative number between the en-dash and the zero, even when there is a space before and/or after, e.g., in a table.
I need a "non-breaking" en-dash? there are non-breakable spaces, after all, too. Or is there a way to instruct css never to break such negative numbers anywhere throughout the entire document? (I doubt this one, but just had to ask.)
of course, I can wrap each negative number into a span to prevent breaking, but this is quite painful. literally, by the time I am all done, my number --0.25 would have to become <span class="nobreak">–0.25</span>. (joke: it's almost like a DOS 10x amplification attack, with 4 chars becoming 40 characters, all because I want to have negative numbers.)
advice appreciated.
/iaw
You can prevent negative numbers from breaking by using the proper MINUS SIGN “−” (U+2212). In
text rendering, browsers, ebook readers, and other software often treat EN DASH as well as HYPHEN-MINUS (the common Ascii hyphen) as allowing a line break after it, even when immediately followed by a digit. No such behavior has been observed for MINUS SIGN.
In HTML, you can write MINUS SIGN as − if you have difficulties in typing the character or if you wish to make it clear to anyone reading the HTML source that MINUS SIGN is used.
In HTML5, how do you skip 5 spaces in a <div>? For example, how do you do this:
"Drumroll... [5 spaces] Something!"
<div>Drumroll... [5 spaces] Something!</div> just outputs "Drumroll... Something!"
There does not seem to be any tags such as <indent> that I have found to indent in the middle of a sentence.
      works, but is there a more efficient way? Such as...
<skip 10px></skip>
Specifically, I am looking for the solution to insert exactly 1,000 spaces easily, for example.
This is not perfectly five spaces, and I'm not sure if there's a way to do it without using five consecutive s, but this will allow you to add a specifiable amount of space inline.
<p>Drumroll...<span style="margin-left:50px;"></span>something</p>
http://jsfiddle.net/5drHj/1/
Another option might be to use the <pre> tag...
<pre>Drumroll... something</pre>
http://jsfiddle.net/5drHj/2/
If you do decide to use consecutive you could use a javascript loop (or php loop for server side construction) to add the 1000 s
Edit: At the risk of losing my tick, I'd like to point out that the answer given by #vals is a third option, and perhaps the most elegant of the three.
No, there is no such element in HTML. Long ago, there was the nonstandard <spacer> tag, but it was abandoned. You are supposed to use CSS for things like this. Wrap some preceding text in a <span> element and set padding-left: 1.25em on it. Tune the value as needed. The width of a space depends on font but is on the average around 0.25em.
The question that you pose in the first half of the question (How to insert spaces easily), is achieved with the property:
white-space: pre;
It means that your text is pre-formatted, and the white spaces should stay as they are. Then just insert those spaces.
fiddle
If you want to insert 1000 spaces, then we are talking probably about alignment, and there is a huge amount of posibilities. (padding specified in em being the most obvious), but you should then give more details of your situation.
How should my class names be?
For example, a CSS class for a vote count, how should I name it?
.vote-count-post (1) // SO uses this
.VoteCountPost (2)
.voteCountPost (3)
.vote.count-post (4)
.vote .count-post (5)
.vote .count.post (6)
What are the advantages and disadvantages of each?
Which is most used and why?
Are there any implications in any of these?
May I have any uppercase in my CSS?
4, 5 and 6 are special
.vote.count-post matches elements with class="vote count-post", or class="count-post vote" or even class="vote something-else count-post".
.vote .count-post matches elements with class="count-post" that are subelements of an element with class="vote"
and .vote .count.post is a mix of those both
Between 1, 2 and 3, all that matters is preference of style. Some people prefer one over another just as they do in programming languages. So just choose whatever you personally prefer, or what is more appropriate for you.
I vote for (1) to always use lower case for your CSS. That way you don't have to remember where you capitalize stuff. So that eliminates (2) and (3).
(5) is really two different elements so can't apply to a single element.
(4) and (6) are invalid for a single element. (4) assumes you are applying two classes to the same element such as class='vote count-post'. (6) is a combination of (4) and (5).
It's just naming, so it's up to you what you like. Either of your examples would work fine. Just pick one and stick to it.
The three first selectors addresses single elements, the fourth addresses a single element with two classes, the fifth addresses an element inside another, and the sixth does the same but with the inner ellement having two classes.
I would probably put class="Vote" on the surronding element, and out class="count" on the count element inside it to address it. I use pascal case for surrounding elements and lowercase for child elements inside them, so I would use:
.Vote .count
I see the first approach a lot (the jQuery UI CSS framework uses it and I find it a very good example for good CSS).
I personally don't like camelcasing in class names from (2) and (3) because it is really easy to get it wrong (just write VotecountPost and it won't work).
(4), (5), (6) are not really a convention thing but rather different selectors as others pointed out already.
I agree with Keltex above that always using lower case is easier and more maintainable ... especially for others who might need to troubleshoot or modify your work.
Yet, I'd also suggest adding a prefix your css class names. In large projects this helps to quickly identify their source and what they apply to. It also helps prevent name collisions (and unpredictable behavior) in a heterogeneous environment.
There's no "right" answer in my opinion. I tend to do what's more readable so I choose (3). In my opinion there's enough word-word-word style text in html/css already. And when styling up e.g. Wordpress I think it's like a mixer full of dashes, hard to navigate.
But it's my opinion, I think you should just get a feel for what you prefer. What you find easy to read, when you look 8 hours per day on these you should choose something you're comfortable with.
i suggest use this .VoteCountPost less space and readable..
In my projects that use jQuery I have determined that I use class names in two distinct ways. The first is for styling where definitions are almost exclusively in a .css file. The second is for jQuery selectors which tend to be isolated to a single function and are more related to the scripting. Because of this split I choose to follow #1 for styling and #2 for jQuery element selectors. If someone chooses to View Source they can now determine the functions of each type of class.
I just started to use nxhtml, and I opened PHP file, it looks just really awful. I usually set black background-color, but PHP/nxhtml mode, background-color is set to light blue, and I don't know how to change it. How can I change it? Is there any good site to learn nxhtml mode?
Adding this line:
(setq mumamo-background-colors nil)
to your .emacs(or equivalent) will disable all background colors coming from mumamo. I personally use zen-color-theme and the combination with mumamo's background colors was simply unbearable so I disabled them altogether.
A possibly better way is to customize mumamo-chunk-coloring. This is an integer that you can set to only color chunks with depth greater than that. Default is 0 so all chunks are colored.
Another possibility is to use mumamo-no-chunk-coloring. This is a minor mode you can turn on for a buffer to avoid chunk coloring in that particular buffer. (This is in the nXhtml menu under "nXhtml / Multiple Major Modes / Remove Chunk Colors Temporarily.)
Another solution (which I would welcome) is to include the chunk coloring in the color themes so they will not clash with them. Since I think that the coloring provides useful information for most users I think that would be the best.
(PS: If you do not use colors you can show chunk dividing hints in the margins if you want too.)
IIRC, this is inherited from mumamo (multiple major modes). Try customizing the "mumamo-background-chunk-major" face (M-x customize-face mumamo-background-chunk-major RET). Un-tick the over-ridden properties to make it inherit from your default background face.
Or for more details on mumamo display, M-x customize-group mumamo-display RET
This is what i have put on my .emacs to override the blue color:
(custom-set-faces
;; custom-set-faces was added by Custom.
;; If you edit it by hand, you could mess it up, so be careful.
;; Your init file should contain only one such instance.
;; If there is more than one, they won't work right.
'(mumamo-background-chunk-major ((((class color) (min-colors 8)) (:background "white")))))