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;
}

How to fix the Twitter Bootstrap Modal box height and width with central position?

 

Recently, while working on a web-portal which has lots of modal boxes to keep the constant flow of information, I encountered an issue of keeping the position of modal boxes in the center of the page while changing the height and width of the modal box specifically as per the modal-box ID.

The solution for this fix was achieved by tweaking in the CSS specifically on the basis of ID’s.

Height fix

If you want to accommodate long form of elements in the modal box and do not want the scroll-bar to appear, set your css as following:

#newModalID .modal-body {
max-height: 800px;
}

Remember that the max-height has to be given only for the modal-body and not the whole modal box. Another thing to be noticed is that, it doesn’t set the height to 800px but it just gives the flexibility to the .modal-body element to stretch up to 800px so as to accommodate anything without scroll-bar.

Width fix

Now, while setting the width you can deal directly with the whole modal-box not just the .modal-body element. Set the width as per your choice for any specific modal-box. Then, you can change the margin accordingly to accommodate the new width.

#newModalID {
	width: 900px; /* SET THE WIDTH OF THE MODAL */
	margin: -250px 0 0 -450px; /* CHANGE MARGINS TO ACCOMMODATE THE NEW WIDTH (original = margin: -250px 0 0 -280px;) */
}

Remember that you have to set the left margin – half of width (here: 900/2 = 450) and as a negative integer.

To fix the vertical position, you have to simply modify the margins to get the desired effect. Often when you change the height of a modal you may want to push the modal up to prevent the modal going off the bottom of the page on smaller resolutions, so you can simply increase the negative top margin value:

#newModalID {
	margin: -120px 0 0 -450px; /* PLAY WITH THE VALUES TO SEE GET THE DESIRED EFFECT */
}

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.

Using CSS3 for new websites. Mistake or not?

Whenever there is an order for a new website, I wish I could use some CSS3 in order to lessen my burden.
But seniors always ask me to again go with traditional image style.

According to w3schools, less and less users are using not-css3 browsers.
Most of them use either Firefox or Chrome whereas IE6, IE7 and IE8 are loosing the market and are used by only approx 12% of all the users.
So do you really think it’s mistake to develop a new website with css3 properties (rounded corners, for example)?

There are certain things that are needed to be kept in mind. One of such things is audience. It all depends on targeted users.

• In house websites you can use css3 as you can tell people inside your company what browsers to use.
• Websites where the target users are kids / teenagers / youngsters, you can go with CSS3 since youngies are always uploading the latest everything.
• Websites which for mobile use, Phones and tablets, you should use css3 since you need a lot of the power to design them write.

But, CSS3 is a strict no-no for commercial websites. In case of the more mature audience I would suggest you to wait for a year or so. A lot of companies have old computers on their desks and don’t like bothering with updates.

Moreover, I recently was working on a grand web portal, where I implemented CSS3. Tried checking each and every page not only while designing HTML but also after integration with W3C validator. FF has a local w3c validator in its tools. So, small things don’t affect much usability on IE6, IE7, IE8. Here your web layout plays a grand role, and hence it should be very user friendly. The areas where I implemented round-corners through CSS3 (for example in menu, buttons, headings, backgrounds, etc) were squared in IE-series. The gradients had no gradient but simply color, text-shadows had no shadow, etc. But still it was really cool to work on due to the functionality, speed and simple look & feel on those sick IE browsers.

Firefox image screenshot

IE6, IE7, IE8

PUNCH : Those who don’t have modern browsers or used to work on old IE browsers will never know how beautiful your website looks with CSS3 effects but still they will love the website with simpler look and feel.

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 */