2

If you look at this CssToInlineStyles class on github. It is essentially trying to make CSS all inline. However, it has priority all wrong when it comes to the already inline CSS being overwritten by the definitions in the style block!

I think on line 312 I need to put in a condition to make sure the inline styles already present should never be overwritten by any definition in the CSS properties. But it looks like it isn't that easy!

Any ideas? I've tried contacting the owner of the class, no reply. If I fix this, I'll make a pull request on github.

Update

If you have the following in a style block:

p{font-family:Arial;font-size:0.9em;color:#53534a;} 
.webv {font-size: 10px; padding:5px 0 0 150px}

Then if you have a p tag like so:

<p class="webv" >Testing</p>

Then the class .webv needs to take effect in terms of font-size.

Update 2

Hakre's solution works well but there is one case it doesn't work. For example if you have this style block:

  *{padding:0;margin:0;}
  h1{padding-bottom:10px;}

The padding for the h1 is still 0, the second h1 doesn't take over which it should! So it looks like this:

<h1 style="padding:0; margin:0;">Test</h1>
2
  • Please add the style attribute output for the h1 element for the update 2 as well. Commented Aug 15, 2011 at 21:40
  • I have added what it looks like after. It just completely ignores the padding-bottom in the h1 definition! Btw, due to fixing something else I am making use of $properties = array_reverse($properties, true); just after line 312. Commented Aug 15, 2011 at 22:47

3 Answers 3

3

If you don't want to have them overwritten you first need to obtain the existing properties from the HTML source.

You then can either check if those are already set before setting the new to prevent overwriting, or you just overwrite them later on to the default ones.

As existing properties are already extracted before, it might work as:

foreach($rule['properties'] as $key => $value)
    if(!isset($properties[$key])) $properties[$key] = $value;

(this will overwrite NULL properties, in case it's a problem, use array_key_exists instead of isset).

You should add a flag to the class/function to change the behavior, so the current behavior does not break but you make your needs optional.

Edit: As multiple rules can apply, the next rule will not overwrite something of the previous rule (which it should but is prevented by the edit above), so this needs more control to preserve the original properties:

$originalProperties = $properties;
foreach($rule['properties'] as $key => $value) $properties[$key] = $value;
$properties = $originalProperties + $properties;

Edit 2: The second suggestion won't work as well. Basically there is need to get the very original values because that function changes the style attribute while it iterates over rules and elements. The same element can become modified twice, so the $originalProperties are not really the original properties but can be modified ones.

Maybe this works with spl_object_hash to create a consistent id/key for each element, but I'm not sure. Maybe DomElement offers something comparable internally, but I have not found such (which should fit better). With a specific key/id per each concrete element, only on first appearance, the very original properties can be preserved:

$elementId = spl_object_hash($element);
if(!isset($originalProperties[$elementId]))
{
    $originalProperties[$elementId] = $properties;
    $originalElements[$elementId] = $element; // Needed to make spl_object_hash work
}
foreach($rule['properties'] as $key => $value) $properties[$key] = $value;
$properties = $originalProperties[$elementId] + $properties;
Sign up to request clarification or add additional context in comments.

9 Comments

@harke - I could of sworn I made that change. I have no idea why I dismissed it! It is working now, just going to test it a few more times.
I wonder why the original author didn't do it this way, because by definition, the inline styles have a higher priority than linked / style-element styles. Your use-case makes sense to me. Maybe you need to give the original author more time to reply? Might be in holidays.
@harke - please see example in the question. I've updated it. This is the case I am having problems with! He might me on holiday actually, I thought I would attempt to solve it myself and then give him the solution but I found it difficult!
Which kind of problem, please elaborate.
What will happen now with the newly added if condition is that the second font-size will be ignored even though it has a higher priority.
|
0

You can use !important after the CSS definition to make sure it takes priority.

E.g.

.yourstyle
{
    color: #000 !important;
}

1 Comment

The class will be passed in HTML and CSS. It will then convert all the style blocks into inline CSS. It's not an issue of the CSS property not having any effect, its being over written during the conversion.
0

Fortunately the owner of this class has fixed this issue! The updated class can be found here.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.