11 maart 2010

Convert CSS to inline styles with PHP

When sending HTML-mails through PHP you'll see that some email-clients (like: gmail) will strip al the styles you defined in an external stylesheet or in a style-tag.

You can't expect the users of your application will define all the styles inline (some WYSIWYG-editors have that functionality), so it would be nice if there was a way to grab the HTML, set the CSS and just get the HTML but with all styles defined inline.

So here is CSSToInlineStyles, this class enables you to do this.

How does it work?

Well, it's pretty straight forward. After setting the HTML (and CSS), the class will read the CSS build an array that contains all the rules sorted by their specifity.

The HTML will be loaded as a DOMDocument.

When that's done, each rule will be looped. The CSS-selector will be converted into a XPath-query. If the query returns an element a style-attribute will be added, all defined CSS-rules will be added into this style attribute.

So, get the class and enjoy.

Dit artikel gaat over: , , , , , , . Convert CSS to inline styles with PHP werd geschreven door Tijs Verkoyen.
Er zijn nog geen reacties, reageer als eerste.

10 maart 2010

CSS Selector to XPath-query

When scrapping HTML-pages it can be usefull to get elements based on CSS-selectors. Therefore I wrote a nifty function that builds a XPath-query that can be used to select the elements in a DOMXPath-document.

The function can be found below:

<?php
/**
 * Convert a CSS-selector into an xPath-query
 *
 * @return    string
 * @param    string $selector    The CSS-selector
 */
function buildXPathQuery($selector)
{
    // redefine
    $selector = (string) $selector;

    // the CSS selector
    $cssSelector = array(    // E F: Matches any F element that is a descendant of an E element
                            '/(\w)\s+(\w)/',
                            // E > F: Matches any F element that is a child of an element E
                            '/(\w)\s*>\s*(\w)/',
                            // E:first-child: Matches element E when E is the first child of its parent
                            '/(\w):first-child/',
                            // E + F: Matches any F element immediately preceded by an element
                            '/(\w)\s*\+\s*(\w)/',
                            // E[foo]: Matches any E element with the "foo" attribute set (whatever the value)
                            '/(\w)\[([\w\-]+)]/',
                            // E[foo="warning"]: Matches any E element whose "foo" attribute value is exactly equal to "warning"
                            '/(\w)\[([\w\-]+)\=\"(.*)\"]/',
                            // div.warning: HTML only. The same as DIV[class~="warning"]
                            '/(\w+|\*)?\.([\w\-]+)+/',
                            // E#myid: Matches any E element with id-attribute equal to "myid"
                            '/(\w+)+\#([\w\-]+)/',
                            // #myid: Matches any E element with id-attribute equal to "myid"
                            '/\#([\w\-]+)/'
                        );

    // the xPath-equivalent
    $xPathQuery = array(    '\1//\2',
                            '\1/\2',
                            '*[1]/self::\1',
                            '\1/following-sibling::*[1]/self::\2',
                            '\1 [ @\2 ]',
                            '\1[ contains( concat( " ", @\2, " " ), concat( " ", "\3", " " ) ) ]',
                            '\1[ contains( concat( " ", @class, " " ), concat( " ", "\2", " " ) ) ]',
                            '\1[ @id = "\2" ]',
                            '*[ @id = "\1" ]'
                        );

    // return
    return (string) '//'. preg_replace($cssSelector, $xPathQuery, $selector);
}
?>

In a post that will be published in the near future you 'll see why I really needed it.

Dit artikel gaat over: , . CSS Selector to XPath-query werd geschreven door Tijs Verkoyen.
Er zijn nog geen reacties, reageer als eerste.

23 januari 2010

Listenr.tv

Listenr.tv is een website waarop je je favoriete muziek kan bekijken.

Why, o why?

Ik luister graag naar muziek, ik ontdek ook graag nieuwe muziek. Daarvoor gebruik ik Last.fm.

Naast naar muziek luisteren kan je via de muziekzenders TMF, Jim of MTV ook heel wat muziek leren kennen door ernaar te kijken. Helaas voor de mensen (zoals ik) die geen mainstream hiphop, boenk-boenk liefhebbers zijn kan je op deze zenders enkel terecht tijdens de thema-uurtjes en daar spelen ze dan enkel de gekende muziek.

Daarom leek het me leuk en handig om de kracht van Last.fm en YouTube te combineren om voor iedereen een persoonlijke muziekzender te maken.

De website kan je op twee manieren benaderen.

  1. Voor de Last.fm gebruiker: Meld je aan met je Last.fm-account en op basis van je favoriete artiesten stelt Listenr.tv een playlist samen.
  2. Voor de gebruiker zonder Last.fm: Ofwel bekijk je de clipjes op de homepage of je klikt door op je favoriete genre.

Zodra je een playlist hebt gekozen kan je beginnen kijken naar jouw favoriete muziek.

Veel plezier!

Dit artikel gaat over: , , , , . Listenr.tv werd geschreven door Tijs Verkoyen.
Er zijn al 6 reacties.

Meer artikels

Ik schreef al over

totaal fout, wtf?, cr solutions, english, video, php, ubuntu, developer, netlash, arf, life, fun, tech, blog, web

Ik lees

Links