Categories
Blog

Write/Speak/Code 2015

Categories
Blog

No, Isabella Didn’t Become More Destructive

She always was. I just chose to start publicizing the crazy stuff she destroyed in my house!

Categories
Blog

Good-bye 2014, Hello 2015

Categories
Blog

My Trip to India

Categories
Blog

BlendConf 2014 Discount Code

In September I will be presenting a talk at BlendConf 2014 in Charlotte, North Carolina! I have never been there, so it will be quite the vacation for me. I’m super excited and humbled to be chosen to present among many talented people in the tech and design industry. I can’t wait to see what everyone will be presenting about!

If you are in the Charlotte area or are interested in making the trip to the conference, I have my personal discount code to share with you to receive 10% off the ticket price!

Use rachelisfabulous at checkout!

Register for BlendConf 2014 here and check out the list of amazing speakers at Lanyrd!

Categories
Blog

Today I Learned About Replaced Elements

There is a new feature I am working on at work that necessitates me to add a rotated element behind an image. I could easily just add another div to the DOM, but I wanted to do it with a CSS pseudo element to cut down on markup. Ideally, I would just add a class via JavaScript if a certain condition was met, and my special case would be “turned on.”

Example of Stackable Cards
We already use a similar technique that I wanted to achieve. The images have rotated boxes behind them to simulate “stacks.”

We have a lot of images on our site and make use of the img tag heavily to load up our assets instead of using divs and setting a background image. What I learned and didn’t realize about until today, is that image tags are something called “replaced elements.”

What is a replaced element?

A replaced element is something that has its appearance controlled by an external resource. So what does that mean? It could mean that its behavior and appearance is controlled by the browser itself. This is why other replaced elements like button, textarea, and input all look different depending on which browser you use because how those elements are displayed is up to the browser.

On these replaced elements, pseudo elements like :before and :after don’t work, and aren’t meant to work due to their inherent responsibility and purpose. This behavior is directly mentioned in the spec. Too bad I didn’t realize it until I had already spent a few days wondering why my style works on a div but I couldn’t find it when I tried swapping it to an img tag!

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

The workaround for to get my desired behavior is not difficult to achieve at all once you realize you can’t manipulate the img tag directly. All you need to do is wrap your image (or other replace element) in a block element like a div and then you can use the :before and :after pseudo elements to their full capacity.

I hope this information helps someone else out there who may not have known about this little piece of behavior in HTML!

References

StackOverflow: CSS :after not adding content to certain elements
W3C: Generated content, automatic numbering, and lists