Forums
View unanswered posts | View active topics It is currently Fri Oct 24, 2014 6:00 am



Reply to topic  [ 9 posts ] 
 Tired of writing cross browser repetitive css... 
Author Message

Joined: Thu Jun 02, 2011 3:19 am
Posts: 8
Post Tired of writing cross browser repetitive css...
I am creating a module in PHP, for Kohana (but it will be adapted to be suitable for every PHP app) to write css based on php config files, like so:
Code:
   $css = array(
      'h2' => array    (
          '$pie' => array(          
             'gradient' => array(
                'type'   => 'horizontal',
                'stops'   => array(
                   0 => 'ffffff',
                   50 => 'f00454',
                   100 => 'fff124',
                )
             )
          ),
//this part is skipped for now
         /*'font-weight'=>'bold',
         'display:none;do:anythingelsethewayuoulike',*/
      ),
);

echo Minim::instance()->inline()
Outputs:
Code:
<style type="text/css">
   h2{
   background:-webkit-gradient(linear,linear, left bottom, right bottom,color-stop(0, #ffffff),color-stop(0.5, #f00454),color-stop(1, #fff124));
   background:-moz-linear-gradient(left center,#ffffff 0%,#f00454 50%,#fff124 100%);
   background:linear-gradient(left center right center,#ffffff 0%,#f00454 50%,#fff124 100%);
}
</style>
<!--[if IE]>
<style>
   h2{-pie-background:linear-gradient(left center right center,#ffffff 0%,#f00454 50%,#fff124 100%);behavior:url(/PIE.htc);}
</style>
<![endif]-->

The plan is to be able to use any type of CSS, like this array or regular css, and then concatenate and minify them, and serving the package gzipped (with choise between one big file, separate validating css (regular, draft, ie-specific) or inline style.
Browser sniffing for ie9 as a replacement for conditional comments

Do you guys see a future for this, if coded properly?
What are the reasons for doing or not doing this, and do you have any tips?


Thu Jun 02, 2011 4:15 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: Tired of writing cross browser repetitive css...
I'm a big fan of CSS preprocessors, so I think this is a great idea.

You might look into some similar established projects, like SASS (http://sass-lang.com/) or LESS (http://lesscss.org/) for inspiration; if you can match an established syntax rather than making up your own that would make it easier for users to cross over I'm sure.

I look forward to seeing what you come up with!


Thu Jun 02, 2011 8:56 am
Profile

Joined: Thu Jun 02, 2011 3:19 am
Posts: 8
Post Thanks! That both looks cool!
The color functions from sass are very good!

About LESS vs a future PHP CSS module:
-The variable functions, mixins, operations: PHP of course has this natively, so that, I dont need to code.

The nested rules are different story though, in a word: wow..

#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}

I'll have to see what I bring to version 0.1 ;)

[edit]
I might also try to parse syntax the way LESS does, it is kinda cool indeed.. but I can't help seeing it as "an extra layer" of programming language though.. maybe I have to sleep about this :P

From a designers point of view (with little or no programming skills), LESS syntax does seem the way to go right now.


Thu Jun 02, 2011 9:06 am
Profile

Joined: Thu Jun 02, 2011 3:19 am
Posts: 8
Post Re: Tired of writing cross browser repetitive css...
This is what my PHP config file looks like:
Code:

$light    
= array('#adadad','#eeeeee''#adadad');
//$dark    = array('#000000','#111111', '696969');

$h = array(

    
'border' => '1px solid '.$light[0],
    
'$xb' => //$xb = cross browser auto values
    
'
        min-height:12px;
        border-radius:5px; 
        box-shadow:'
.$light[0].' 0px 2px 3px
    '
,
    
'$pie' => array//pie auto gradient generator
    
(                 
        
'gradient' => array
        (
            
'type'    => 'horizontal',
            
'stops'    => array
            (
                
33    => $light[0], 
                 
66    => $light[1],
                 
100 => $light[2],
                 
//or 1000
             
),
         ),
     ),
);

return array(
    
'h1' => $h + array(
        
'font-size'    => '16px' 
    
),
    
'h2' => array_merge($h, array
    (
         
'font-size'    => '12px',
     )),
     
'li a' =>
     
'
         font-size:18px;
         color:red;
     '
);
 


This config generates the following css:
Code:
<style type="text/css">
h1 {
   border: 1px solid #adadad;
   min-height: 12px;
   border-radius: 5px;
   box-shadow: #adadad 0px 2px 3px;
   background: linear-gradient(left center right center, #adadad 33%, #eeeeee 66%,
      #adadad 100%);
   font-size: 16px;
}

h2 {
   border: 1px solid #adadad;
   min-height: 12px;
   border-radius: 5px;
   box-shadow: #adadad 0px 2px 3px;
   background: linear-gradient(left center right center, #adadad 33%, #eeeeee 66%,
      #adadad 100%);
   font-size: 12px;
}

li a {
   font-size: 18px;
   color: red;
}
</style>
<!--[if IE 6]><style type="text/css">
   h1{height:12px;}h2{height:12px;}</style>
   <![endif]-->
<!-- nonstrict: -->
<style type="text/css">
h1 {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-box-shadow: #adadad 0px 2px 3px;
   -moz-box-shadow: #adadad 0px 2px 3px;
}

h2 {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-box-shadow: #adadad 0px 2px 3px;
   -moz-box-shadow: #adadad 0px 2px 3px;
}
</style>

<!-- end nonstrict; -->
<style type="text/css">
h1 {
   background: -webkit-gradient(linear, linear, left bottom, right bottom, color-stop(0.33
      , #adadad), color-stop(0.66, #eeeeee), color-stop(1, #adadad) );
}

h2 {
   background: -webkit-gradient(linear, linear, left bottom, right bottom, color-stop(0.33
      , #adadad), color-stop(0.66, #eeeeee), color-stop(1, #adadad) );
}
</style>
<style type="text/css">
h1 {
   background: -moz-linear-gradient(left center, #adadad 33%, #eeeeee 66%, #adadad 100%
      );
}

h2 {
   background: -moz-linear-gradient(left center, #adadad 33%, #eeeeee 66%, #adadad 100%
      );
}
</style>
<style type="text/css">
h1 {
   -pie-background: linear-gradient(left center right center, #adadad 33%, #eeeeee 66%,
      #adadad 100%);
   behavior: url(/PIE.htc);
}

h2 {
   -pie-background: linear-gradient(left center right center, #adadad 33%, #eeeeee 66%,
      #adadad 100%);
   behavior: url(/PIE.htc);
}
</style>


So it could save lots of time i think.
[edit]
As noted output will become a merged, minified and gzipped file (or multiple files, whatever suits the needs).
There's still lots of work to do.


Thu Jun 02, 2011 9:40 am
Profile

Joined: Thu Jun 02, 2011 3:19 am
Posts: 8
Post Re: Tired of writing cross browser repetitive css...
An update, got a bit of progress..
See screenie attachment :P
That editor window is the whole css document for the testsite.
It will become quite neat, if you are into PHP.
Got 200 rows of code now, but it is dead simple!

Automatic cross browser values FTW, and in combination with PIE its just simple!

Here's a snippet
Code:
"#bodyport"   => array
   (
      '$pie' => array//pie auto gradient generator
      (             
         "gradient" => array
         (
            "type"   => "vertical",
            "stops"   => array
            (   0 => $secundary[1],
            
               11 => "#fff",
               87 => "#fff",
             ),
         ),
      ),
   ),
   ".menu" => "margin:-11px 0 0 5px",
   ".menu, .menu a" => $fl,
   ".menu a"   => array
   (
      "padding:5px;
      margin: 0 5px 0 0;
      ",
      '$xb' => //$xb = cross browser auto values//alpha bg?
      "
            border-radius:0 0 3px 3px;
      ",


Attachments:
css.png [64.96 KiB]
Not downloaded yet
Fri Jun 03, 2011 3:21 pm
Profile

Joined: Mon Jun 13, 2011 6:35 pm
Posts: 3
Location: Richmond Hill, Ontario, Canada
Post Re: Tired of writing cross browser repetitive css...
Top Tip:
You don't need at add the conditional behavior line to each stylesheet rule -
instead you can make a simple single-attribute rule like this:
Code:
.css3     { behavior: url(/css/pie/1.0.b5.htc); }

I can generate that line in my pages automatically and if I get a new version of PIE (as I did today) all my user-defined css continues to work just fine without those hard-coded htc file paths inside, like this:
Code:
.box{
  background: #FFFFFF; border: 1px solid #c0c0c0; margin: 0 0 10px 0;
  -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
  -webkit-box-shadow: #889 2px 2px 2px; -moz-box-shadow: #889 2px 2px 2px; box-shadow: #889 2px 2px 2px;
}
.box h1{
  text-align: center; font-size: 100%; line-height: 24px; margin: 0px 0;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#D3D3FF));
  background: -moz-linear-gradient(#ffffff, #D3D3FF);
  background: -ms-linear-gradient(#ffffff, #D3D3FF); /* Needed for IE10 */
  background: linear-gradient(#ffffff, #D3D3FF);
  -pie-background: linear-gradient(#FFFFFF, #D3D3FF);
  -webkit-border-radius: 8px 8px 0 0; -moz-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #D0D0D0; position: relative;
}


Now for any element which includes css3 atrributes I just add the css3 class to it:
Code:
<div class="css3 box">
  <h1 class="css3 box">Westmount Church</h1>
  <p><i>Service times</i>...</p>
</div>


See an example here

Have fun CMS builders!

_________________
Blessings,

Martin Francis
www.ecclesiact.com
Twitter
<><


Fri Jun 24, 2011 9:10 am
Profile WWW

Joined: Mon Nov 29, 2010 10:18 am
Posts: 16
Post Re: Tired of writing cross browser repetitive css...
ie6 still doesn't properly read multiple classes on an element, however.


Mon Jun 27, 2011 3:24 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: Tired of writing cross browser repetitive css...
@neologix IE6 reads multiple classes on an element just fine. What it fails on is CSS selectors which use two classes together, like .myclass1.myclass2 {...}

Perhaps that's what you were referring to, but I don't see anyone doing that in the above code snippets so I'm not sure.


Mon Jun 27, 2011 3:31 pm
Profile

Joined: Mon Nov 29, 2010 10:18 am
Posts: 16
Post Re: Tired of writing cross browser repetitive css...
jason wrote:
@neologix IE6 reads multiple classes on an element just fine. What it fails on is CSS selectors which use two classes together, like .myclass1.myclass2 {...}

Perhaps that's what you were referring to, but I don't see anyone doing that in the above code snippets so I'm not sure.


that's what i meant, and what my ie6 experience has been, thanks for the clarification.


Tue Jun 28, 2011 8:42 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 9 posts ] 

Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.