How to support bubble?
kinglezhuang opened this issue · comments
I tested this project, it can not support bubble.
For exsample:
<title>template</title> <style> /* ============================================================================================================================ == OVAL SPEECH BUBBLE (more CSS3) ** ============================================================================================================================ */.oval-speech {
position:relative;
width:270px;
padding:2px 20px;
margin:1em auto 50px;
text-align:center;
color:#000;
background:#f5f5f5;
-moz-border-radius:30px;
border-radius:30px;
-webkit-box-shadow: 0px 10px 10px #e8e8e8;
-moz-box-shadow: 0px 10px 10px #e8e8e8;
box-shadow: 0px 10px 10px #e8e8e8;
}
/* creates part of the curve /
.oval-speech:before {
content:"";
position:absolute;
z-index:1;
bottom:4px;
right:91%;
height:30px;
border-right:60px solid #f5f5f5;
background:#f5f5f5; / need this for webkit - bug in handling of border-radius /
/ css3 /
-webkit-border-bottom-right-radius:80px 50px;
-moz-border-radius-bottomright:80px 50px;
border-bottom-right-radius:80px 50px;
/ using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
-webkit-transform:translate(0, -2px);
-moz-transform:translate(0, -2px);
-ms-transform:translate(0, -2px);
-o-transform:translate(0, -2px);
transform:translate(0, -2px);
}
/* creates part of the curved pointy bit /
.oval-speech:after {
content:"";
position:absolute;
z-index:1;
bottom:4px;
right:91%;
width:60px;
height:30px;
background:#fff;
/ css3 /
-webkit-border-bottom-right-radius:40px 50px;
-moz-border-radius-bottomright:40px 50px;
border-bottom-right-radius:40px 50px;
/ using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
-webkit-transform:translate(-30px, -2px);
-moz-transform:translate(-30px, -2px);
-ms-transform:translate(-30px, -2px);
-o-transform:translate(-30px, -2px);
transform:translate(-30px, -2px);
}
</style>
This is a blockquote that is styled to look like a speech bubble
It only extend the first class style. Not all, but in fact i need all.
For styles like this, you don't want them to be inlined. What you can do is put this styles in to a media query so that the inliner preserves them and doesn't clear them.
e.g.
@media all {
// Your styles go here
}
The inliner will see the media query and embed these styles in the <head> instead of inlining them.
Thank you very much, i will try it.
@kinglezhuang Closing the loop here. Did this work for you?
@leemunroe - Tested and works as expected. Using @media all bypassing inlining. Safe to close this issue.
Of note for @kinglezhuang - Pseudo selectors aren't well supported see reference sheet and samples with progressive enhancement.