Geek Answers Handbook

CSS frame generator in PHP

I want to create something similar to CSS Generator . This is what I have been working on so far:

<?php header('Content-type: text/plain'); $source = '<body class="theme"> <div class="header"> <h1><a href="#">Welcome</a></h1> </div> <div class="content"> <div class="sidebar"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div> <div class="main"> <h2>Main Heading</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\ standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div> <div class="footer"> <p>Copyright &copy; 2012 Me!</p> </div> </body>'; $html = new DOMDocument; $html->loadHTML($source); $nodes = $html->getElementsByTagName("*"); $css = ""; for ($i = 0; $i < $nodes->length; $i++) { $node = $nodes->item($i); if(!$node->hasAttribute("class") && !$node->hasAttribute("id")) $css = $css . str_replace(array("/"), array(" "), $node->getNodePath()) . " {}\n"; if ($node->hasAttribute("class")) { $css = $css . $node->nodeName . "." . $node->getAttribute("class") . " {}\n"; } elseif ($node->hasAttribute("id")) { $css = $css . "#" . $node->getAttribute("id") . " {}\n"; } } echo $css; ?>

The result that I get is incorrect. Desired Result:

 body.theme div.header {} body.theme div.header h1 {} body.theme div.header h1 a {} body.theme div.content {} body.theme div.content div.sidebar {} body.theme div.content div.sidebar ul {} body.theme div.content div.sidebar ul li {} body.theme div.content div.sidebar ul li a {} body.theme div.content div.main {} body.theme div.content div.main h2 {} body.theme div.content div.main p {} body.theme div.footer {} body.theme div.footer p {}

But now I get:

  html {} body.theme {} div.header {} html body div[1] h1 {} html body div[1] h1 a {} div.content {} div.sidebar {} html body div[2] div[1] ul {} html body div[2] div[1] ul li[1] {} html body div[2] div[1] ul li[1] a {} html body div[2] div[1] ul li[2] {} html body div[2] div[1] ul li[2] a {} html body div[2] div[1] ul li[3] {} html body div[2] div[1] ul li[3] a {} html body div[2] div[1] ul li[4] {} html body div[2] div[1] ul li[4] a {} html body div[2] div[1] ul li[5] {} html body div[2] div[1] ul li[5] a {} div.main {} html body div[2] div[2] h2 {} html body div[2] div[2] p {} div.footer {} html body div[3] p {}

I tried to manipulate as much as possible, but could not better. Can you help me?

+4
source share
3 answers

Called from Perry Tew . Tried my best! :)

Taking a fork from Perry Tew , I did something similar, which:

  • Works with both Class and ID .
  • Classes to be defined using concatenated . s.
  • Gives ID first preference, then Class .
  • Added spaces to { . minor

PHP code:

 <?php function print_css($parentTag, $prefix, &$dup_checker) { if ($parentTag->nodeName == '#text') { return; } if ($parentTag->hasAttribute("class") || $parentTag->hasAttribute("id")) { $idpart = ($parentTag->hasAttribute("id")) ? "#" . $parentTag->getAttribute("id") : ""; $classpart = ($parentTag->hasAttribute("class")) ? "." . str_replace(" ", ".", $parentTag->getAttribute("class")) : ""; $my_css = $prefix . $parentTag->nodeName . $idpart . $classpart; } else { $my_css = $prefix . $parentTag->nodeName; } if (!isset($dup_checker[$my_css])) { echo $my_css . " {}\n"; if ($parentTag->nodeName == 'a') { foreach (array("link", "visited", "hover", "active", "focus") as $pseudo) echo $my_css . ':' . $pseudo . " {}\n"; } $dup_checker[$my_css] = 1; } $nodes = $parentTag->childNodes; for ($i = 0; $i < $nodes->length; $i++) { $node = $nodes->item($i); print_css($node, $my_css . ' ', $dup_checker); } } header('Content-type: text/plain'); $source = '<body class="theme"> <div class="header class2"> <h1><a href="#">Welcome</a></h1> </div> <div class="content"> <div class="sidebar"> <ul> <li><a href="#">Link 1</a></li> <li id="hellos" class="meow wuff"><a href="#"><span>Link 2</span></a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div> <div class="main"> <h2>Main Heading</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\ standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div> <div class="footer"> <p id="hello">Copyright &copy; 2012 Me!</p> </div> </body>'; $html = new DOMDocument; $html->loadHTML($source); $nodes = $html->getElementsByTagName("body"); $css = ""; $dup_checker = array(); for ($i = 0; $i < $nodes->length; $i++) { $node = $nodes->item($i); print_css($node, '', $dup_checker); } ?>

Conclusion:

 body.theme {} body.theme div.header.class2 {} body.theme div.header.class2 h1 {} body.theme div.header.class2 h1 a {} body.theme div.header.class2 h1 a:link {} body.theme div.header.class2 h1 a:visited {} body.theme div.header.class2 h1 a:hover {} body.theme div.header.class2 h1 a:active {} body.theme div.header.class2 h1 a:focus {} body.theme div.content {} body.theme div.content div.sidebar {} body.theme div.content div.sidebar ul {} body.theme div.content div.sidebar ul li {} body.theme div.content div.sidebar ul li a {} body.theme div.content div.sidebar ul li a:link {} body.theme div.content div.sidebar ul li a:visited {} body.theme div.content div.sidebar ul li a:hover {} body.theme div.content div.sidebar ul li a:active {} body.theme div.content div.sidebar ul li a:focus {} body.theme div.content div.sidebar ul li#hellos.meow.wuff {} body.theme div.content div.sidebar ul li#hellos.meow.wuff a {} body.theme div.content div.sidebar ul li#hellos.meow.wuff a:link {} body.theme div.content div.sidebar ul li#hellos.meow.wuff a:visited {} body.theme div.content div.sidebar ul li#hellos.meow.wuff a:hover {} body.theme div.content div.sidebar ul li#hellos.meow.wuff a:active {} body.theme div.content div.sidebar ul li#hellos.meow.wuff a:focus {} body.theme div.content div.sidebar ul li#hellos.meow.wuff a span {} body.theme div.content div.main {} body.theme div.content div.main h2 {} body.theme div.content div.main p {} body.theme div.footer {} body.theme div.footer p#hello {}

Note:

When the a tag is the parent of a span tag or other tag, it does not print the pseudo classes. Can someone help me revise the code?

Demo: http://codepad.viper-7.com/UbBil2 (old)

Initial loans should go to Perry Tew .

+1
source

I am trying to learn php by answering questions. The code below generates the result you are looking for. I would like to receive feedback and criticism regarding any mistakes I made. Thanks!

 <?php function print_css($parent_node, $prefix, &$dup_checker){ if($parent_node->nodeName == '#text'){ return; } if ($parent_node->hasAttribute("id")) { $my_css = $prefix . $parent_node->nodeName . "#" . $parent_node->getAttribute("id"); } elseif ($parent_node->hasAttribute("class")) { $my_css = $prefix . $parent_node->nodeName . "." . $parent_node->getAttribute("class"); } else { $my_css = $prefix . $parent_node->nodeName; } if(!isset($dup_checker[$my_css])){ echo $my_css . " {}\n"; if($parent_node->nodeName =='a'){ echo $my_css . ':link' . " {}\n"; echo $my_css . ':visited' . " {}\n"; echo $my_css . ':hover' . " {}\n"; echo $my_css . ':active' . " {}\n"; echo $my_css . ':focus' . " {}\n"; } $dup_checker[$my_css] = 1; } $nodes = $parent_node->childNodes; for ($i = 0; $i < $nodes->length; $i++) { $node = $nodes->item($i); print_css($node, $my_css . ' ', $dup_checker); } } header('Content-type: text/plain'); $source = '<body class="theme"> <div class="header"> <h1><a href="#">Welcome</a></h1> </div> <div class="content"> <div class="sidebar"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li id="fourth_id"><a href="#">Link 4</a></li> <li id="fifth_id"><a href="#">Link 5</a></li> </ul> </div> <div class="main"> <h2>Main Heading</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\ standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div> <div class="footer"> <p>Copyright &copy; 2012 Me!</p> </div> </body>'; $html = new DOMDocument; $html->loadHTML($source); $nodes = $html->getElementsByTagName("body"); $css = ""; $dup_checker = array(); for ($i = 0; $i < $nodes->length; $i++) { $node = $nodes->item($i); print_css($node, '', $dup_checker); } ?> Output: body.theme {} body.theme div.header {} body.theme div.header h1 {} body.theme div.header h1 a {} body.theme div.header h1 a:link {} body.theme div.header h1 a:visited {} body.theme div.header h1 a:hover {} body.theme div.header h1 a:active {} body.theme div.header h1 a:focus {} body.theme div.content {} body.theme div.content div.sidebar {} body.theme div.content div.sidebar ul {} body.theme div.content div.sidebar ul li {} body.theme div.content div.sidebar ul li a {} body.theme div.content div.sidebar ul li a:link {} body.theme div.content div.sidebar ul li a:visited {} body.theme div.content div.sidebar ul li a:hover {} body.theme div.content div.sidebar ul li a:active {} body.theme div.content div.sidebar ul li a:focus {} body.theme div.content div.sidebar ul li#fourth_id {} body.theme div.content div.sidebar ul li#fourth_id a {} body.theme div.content div.sidebar ul li#fourth_id a:link {} body.theme div.content div.sidebar ul li#fourth_id a:visited {} body.theme div.content div.sidebar ul li#fourth_id a:hover {} body.theme div.content div.sidebar ul li#fourth_id a:active {} body.theme div.content div.sidebar ul li#fourth_id a:focus {} body.theme div.content div.sidebar ul li#fifth_id {} body.theme div.content div.sidebar ul li#fifth_id a {} body.theme div.content div.sidebar ul li#fifth_id a:link {} body.theme div.content div.sidebar ul li#fifth_id a:visited {} body.theme div.content div.sidebar ul li#fifth_id a:hover {} body.theme div.content div.sidebar ul li#fifth_id a:active {} body.theme div.content div.sidebar ul li#fifth_id a:focus {} body.theme div.content div.main {} body.theme div.content div.main h2 {} body.theme div.content div.main p {} body.theme div.footer {} body.theme div.footer p {}
+2
source

How about this? it supports identifiers and eliminates duplicates and can process some elements that will be displayed only once, and not li [1] li [2]

 <?php header('Content-type: text/plain'); $source = '<body class="theme"> <div class="header"> <h1><a href="#">Welcome</a></h1> </div> <div class="content"> <div id="ff"> </div> <div class="sidebar"> <ul> <li id="hh"><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div> <div class="main"> <h2>Main Heading</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\ standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div> <div class="footer"> <p>Copyright &copy; 2012 Me!</p> </div> </body>'; $html = new DOMDocument; $html->loadHTML($source); $nodes = $html->getElementsByTagName("*"); $css = array(); $paths=array(); for ($i = 0; $i < $nodes->length; $i++) { $node = $nodes->item($i); $key=$node->getNodePath(); if(!$node->hasAttribute("class") && !$node->hasAttribute("id")) $paths=addPath($paths,$key,"",$node->nodeName); $path=process($paths,$key); if (!$path)continue; $css[$key]=str_replace(array("/"), array(" "), $path) . " {}\n"; if ($node->hasAttribute("class")) { $class=$node->nodeName . "." . $node->getAttribute("class"); $paths=addPath($paths,$key,$class,$node->nodeName); $path=process($paths,$key); $css[$key]=str_replace(array("/"), array(" "), $path) . " {}\n"; } elseif ($node->hasAttribute("id")) { $id="#" . $node->getAttribute("id"); $paths=addPath($paths,$key,$id,$node->nodeName); $path=process($paths,$key); $css[$key]=str_replace(array("/"), array(" "), $path) . " {}\n"; } } $css=implode("",array_unique($css)); echo $css; function addPath($paths,$path,$class,$name){ $once_elems=array( 'li','a' ); $sourcePath=explode("/",$path); if ($sourcePath[1]=="html"){ unset($sourcePath[1]); } $path=implode("/",$sourcePath); if (!$class && isset($paths[$path])){ return $paths; } if ((in_array($name,$once_elems) && !$class) || !$class){ $class=$name; } $paths[$path]=$class; return $paths; } function process($paths,$path){ $sourcePath=explode("/",$path); if ($sourcePath[1]=="html"){ unset($sourcePath[1]); } $sourcePath=array_values($sourcePath); $path=implode("/",$sourcePath); foreach ($paths as $k=>$v){ if (!$k)continue; $ex=explode("/",$k); if (strpos($path,$k,0)!==false){ $sourcePath[count($ex)-1]=$v; } } $path=implode("/",$sourcePath); return $path; } ?>

Conclusion:

  body.theme {} body.theme div.header {} body.theme div.header h1 {} body.theme div.header h1 a {} body.theme div.content {} body.theme div.content #ff {} body.theme div.content div.sidebar {} body.theme div.content div.sidebar ul {} body.theme div.content div.sidebar ul #hh {} body.theme div.content div.sidebar ul #hh a {} body.theme div.content div.sidebar ul li {} body.theme div.content div.sidebar ul li a {} body.theme div.content div.main {} body.theme div.content div.main h2 {} body.theme div.content div.main p {} body.theme div.footer {} body.theme div.footer p {}
0
source

More articles:


All Articles