Nested Conditions for SCSS

We all know that CSS doesn’t handle any conditions.

It was wonderful when we found that there is capability to execute conditional statements in CSS provided by some css pre-processors such as LESS and SASS (Latest: SCSS which has very similar syntax to Less).

I had been working with both of them lately. Both are awesome.

To my surprise, there was no reference of using nested loops in any of them.

I happened to work around for loop in scss to create a css which makes awesome grids.
The idea was inspired from: http://css-tricks.com/dont-overthink-it-grids/

The for loop has been used in the following way:

$min_width: "(max-width: 700px)"; /* For Responsive - 100% width for all columns 
                                    below 700px resolution */
$n: 16;

@for $i from 1 through $n {
  @for $j from 1 through $i {
    $new_width: $j/$i*100%;
    .col-#{$j}-#{$i} {
      width: $new_width;
      @media #{$min_width} {
        width: 100%;
      }
    }
  }
}

It works totally fine and create a series of css classes in the following manner:

.col-1-1 {width:100%;}
.col-1-2 {width:50%;} 
.col-2-2 {width:100%;}
.col-1-3 {width:33.333%;}
.col-2-3 {width:66.666%;}
.col-3-3 {width:100%;}
.......... likewise ..........
@media (max-width: 700px) {
  .col-1-1 {width:100%;}
  .col-1-2 {width:100%;} 
  .col-2-2 {width:100%;}
  .col-1-3 {width:100%;}
  .col-2-3 {width:100%;}
  .col-3-3 {width:100%;}
  .......... likewise ..........
}

How to change the color of placeholder attribute text of input element?

The CSS3 Placeholder Pseudo-element

 

One of the features of HTML5 that was very quickly adapted by the developers around the globe and almost all the browsers developed since then, was “placeholder” attribute in input element. People stopped using javascript snippet in their code with onclick and onblur events.

Basically, placeholder attribute is used for displaying placeholder (informative) text in input fields, which fades away as soon as something is typed in the input box.

The placeholder-text is always faded (has opacity less than 1 = light in color) as compared to the original value text of input box. So, I was looking for a way to change the text-styling for the placeholder-text.

The latest ::input-placeholder CSS pseudo-element gives us a standards-compliant way to style placeholder text, regardless of an input field’s default styles. However most of the browsers have started to implement it but still it is preferred to use prefixed notations for each browser.

Example :

input {
	padding: 0px 15px;
	width: 300px;
	height: 30px;
	border: 1px solid #555;
	box-shadow: inset 1px 1px 1px 1px #000;
	border-radius: 5px;
	background: #666;
	font-size: 14px;
	color: #fff;
	text-shadow: 0px 1px 1px #000;
}
input::-webkit-input-placeholder {
	color: rgba(255,0,255,1); /* white color with alpha = 1 (alpha = opacity varies on a scale of 0 to 1 with decimal values in between) */
	text-transform: capitalize;
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	letter-spacing: 0.1em;
	line-height: 18px;
	padding: 0px 10px;
	text-align: left;
	text-decoration: underline;  /* blink property doesn't work in chrome right now */
}
input::-moz-placeholder {
	color: rgba(255,0,255,1);
	text-transform: capitalize;
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	letter-spacing: 0.1em;
	line-height: 25px;
	padding: 0px 10px;
	text-align: left;
	text-decoration: blink;
}
input:-moz-placeholder {   /* Older versions of Firefox */
	color: rgba(255,0,255,1);    /* alpha property doesn't properly work Firefox */
	text-transform: capitalize;
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	letter-spacing: 0.1em;
	line-height: 18px;
	padding: 0px 10px;
	text-align: left;
	text-decoration: blink;
}
input:-ms-input-placeholder { 
	color: rgba(255,0,255,1);
	text-transform: capitalize;
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	letter-spacing: 0.1em;
	line-height: 18px;
	padding: 0px 10px;
	text-align: left;
	text-decoration: blink;
}

Truncating / Triming the string with Ellipsis (…)

 

p {
white-space: nowrap;
width: 100%;
overflow: hidden;              /* "overflow" value must be different from "visible" */
text-overflow: ellipsis;
}

 

Here according to the css defined above the string given in paragraph tags will be truncated or trimmed using ellipsis (the symbol of 3 dots). All the 4 properties are essential to define. Explaining the role of all 4 properties :

• white-space: nowrap; >>> Brings the text in one single line.
• width: 100%; >>> Sets the width of the paragraph tag. Here in this case the width of parent tag of para tag will be considered.
• overflow: hidden; >>> The text going out of width (range / limit) of the para tag is set hidden.
• text-overflow: ellipsis; >>> Gives 3 dots where the text was truncated. The ellipsis would be 100% visible in any given case, doesn’t matter how much text is trimmed.

 My name is Anthony Gonsalves. I work in a coal mine.

If the width of parent element of p tag has width of 100px, the result string would be : My name is …

Two Favorite CSS4 selectors – :not() and :matches()

In the CSS4 Specification it says :not() can be used for both selectors and pseudo classes. It will not work with:after or :before, but everything else works great. So lets say you want to apply to everything except links.

*|*:not(:link) {
/* Some CSS */
}

in the code snippet above, *|* is a general “apply to everything” rule. Basically it’ll apply the CSS to all the elements. But here css would be applied to all except the links.

So, the negation pseudo-class, :not(X), is a functional notation taking a selector list as an argument. It represents an element that is not represented by its argument.

NOTE: Negations may not be nested within itself or within :matches(). That means :not(:not(…)) and :matches(:not(…)) are invalid.

Pseudo-elements cannot be represented by the negation pseudo-class; they are not valid within :not().

Now coming over to :matches.

In this example, we condense three rules with identical declarations into one. Thus,

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

is equivalent to:

h1, h2, h3 { font-family: sans-serif }

The matches-any pseudo-class, :matches(X), is a functional notation taking a selector list as its argument. It represents an element that is represented by its argument.
In CSS4, only compound selectors are allowed within :matches(): combinators are not allowed. Additionally, :matches() may not be nested within itself or within :not(). :matches(:matches(…)) and :not(:matches(…)) are invalid.
Pseudo-elements cannot be represented by the matches-any pseudo-class; they are not valid within :matches().
Default namespace declarations do not affect the subject of any selector within a matches-any pseudo-class unless the argument is an explicit universal selector or a type selector.

For example, following selector matches any element that is being hovered or focused, regardless of its namespace. In particular, it is not limited to only matching elements in the default namespace that are being hovered or focused.

*|*:matches(:hover, :focus)

The following selector, however, represents only hovered or focused elements that are in the default namespace, because it uses an explicit universal selector within the :matches() notation:

*|*:matches(*:hover, *:focus)


CSS4

 

First of all I would like to start with that there has never been anything like CSS4.
It’s the development of independent modules published after CSS 2.1.

To be more precise and accurate, we might like to explore the content from the following post.
A Word About CSS4

But still in order to explore the latest so called CSS4, we can discuss about the latest selectors that have been developed so as to ease the pain of using javascript / jQuery extensively.

First nice feature I would be discussing would be giving styles to the parent element based on its child element. Consider the following line:

ul > li:hover {color:#ff0000;}

Here li is a child element and ul is a parent element. So, here the color of li will change when list item is hovered.
Introducing the “$” in the syntax. This allows for styling of a parent element (‘ul’ here) based on its child element (‘li’ here). See the example below:

$ul li:hover {color:green;}

Here, if one hovers over a list element, the whole list will turn green. This is a great and dearly needed feature.

Kindly refer to further posts coming in near future to know more features.

CSS Hacks for IE6, IE7, IE8, IE9

Older versions of IE has been one of the biggest issues in the past. But the time demands us to move on. Still some of the css hacks are handful to know what you can technically get away with, whether it be for debugging, or showing off to your friends!

First thing first, use of conditional statements in the css. For example,

<!--[if lte IE 8]>
Make IE8 or less than IE8 happy.
<![endif]-->

We could have written “[if IE 8]” to just specifically target IE8.
Here are different types of conditional symbols. Like,

lt

less than

gt

greater than

lte

less than or equal to

gte

greater than or equal to

!

not equal to

It should be used most of the times when you have more than 2-3 lines of fixes for a particular browser. While if you have 1-2 issues in a certain browser, I would suggest you to use the following css hacks.

IE6 – underscore hack (_)

Example:

p {
color: red; /* all browsers, of course */
_color : orange; /* IE6 */


IE7 and Below – Asterisk symbol (*)

Example:

p {
color: red; /* all browsers, of course */
*color : yellow; /* IE7 and below */


IE8 and Below – append “\9″ to end of style (\9)

Example:

p {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */