CSS - Smarter Code Comments

CSS - smarter code comments

/* * /

.class { color: #ffa; }

/* */

The space between the * and / in the first line causes the comment block to be un-closed until the final, paired, */ on the last line.

If you close that space then the .class css is un-commented.

For languages such as php and JavaScript the opening /* in the last line can be replaced with a // as a single-line comment:

/* */
$name = $_POST['first_name'] . " " . $_POST['last_name'];
// */

I think it's called 'lazy-commenting' or something, but I'm not sure.

CSS is getting apply despite of comments??

Because you're using the wrong comments syntax, you should be using: /* ... */ to comment out CSS, the <!-- ... --> is html comment syntax; and once you're inside of the style element html is itself invalid and can, therefore, be handled by the browser as it sees fit.

Therefore you may want to try:

<style type="text/css">
/*
body { }
...

*/
</style>

It's worth noting that, like html, there is no single-line comment syntax, which in JavaScript for example would be anything following //.

Some further information: CSS - smarter code comments

Smarter word break in CSS?

Try word-break: break-word; it should behave as you expect.

3rd level in CSS drop down menu needs smarter vertical alignment

just edit this class like this :

#menu > li > ul li:hover > ul{
    display:block;
    position:absolute;
    left:100%;
    border-left:solid 3px #fff;
    top:inherit;                  /*changed*/
    margin-top:-29px;             /*added*/
    width:auto;
}

jsFiddle

HTML and CSS smart auto line-break?

You can use <wbr> tag to break the link in a specific location.

When a word is too long, or you are afraid that the browser will break
your lines at the wrong place, you can use the element to add
word break opportunities.

You should add it in the place you want your text will break:

<a href="https://www.soundcloud.com/thelastminutemusic"><p>www.soundcloud.com/<wbr>thelastminutemusic</p></a>

Enable content in CSS Tabs

There is an updated version of the code which allows you to click on a tab to view the content. After clicking, the content remains visible.

http://calebogden.com/advanced-css-tabs/

Relevant excerpts:

Since we are going to be using the target selector, we’ll need to add
ID’s [sic] to the links, and selectors the the HREF attributes as well. This
will allow us to select the tab via it’s target, and it’s next sibling
from the same method. The new HTML for a link will be as follows:

<a id="tab1" href="#tab1">Scamper</a>

With the HTML revised, now all we need to do is change the selectors from using :hover to :target.

.tabs a:target { declarations } 
.tabs a:target:after { declarations } 
.tabs a:target + section.tabs-content { declarations }

Here is a working fiddle showing the :target selectors: http://jsfiddle.net/8BKtz/

To select an initial tab, you can put the hash into the URL.

@matthias.p shows a nicer solution for selecting an initial tab by using smarter selectors. However all solutions (including the original code and my solution) rely on newer CSS selectors so they will break partially or completely in IE8 and below, even with a library like Modernizr added to support the HTML 5 elements used (like section).

For now, I would probably use a snippet of JavaScript to make the code more widely compatible. It's nice to know that in the future a pure CSS solution will be available.

Here's a complete solution which uses JS to achieve greater compatibility: http://jsfiddle.net/hN4S3/1/

How can I ignore leading and trailing linebreaks within an html code block using css, javascript or jquery?

You could use this hack:

pre:first-line {
    line-height: 0;
}

---

Related Topics